Ext 常用组件解析
Panel
定义&常用属性
//1.使用initComponent
Ext.define('MySecurity.view.resource.ResourcePanel', {
extend: 'Ext.panel.Panel',
requires:[
'MySecurity.view.resource.ResourceGrid'
],
xtype: 'resourcePanel',
//是否显示边框
border:true,
padding:'0 5',
//折叠模式
collapseMode:'header',
//是否可折叠
collapsible: true,
//点击header可折叠
titleCollapse:true,
//折叠的位置
collapseDirection : 'top',
//展开时header的位置
headerPosition:'left',
//是否隐藏header
hideHeaders: true,
initComponent : function() {
this.grid = Ext.create('MySecurity.view.resource.ResourceGrid');
this.items = [this.grid];
this.callParent(arguments);
}
});
//2.使用items
Ext.define('MySecurity.view.resource.ResourcePanel', {
extend: 'Ext.panel.Panel',
requires:[
'MySecurity.view.resource.ResourceGrid'
],
xtype: 'resourcePanel',
border:true,
padding:'0 5',
items:[{
xtype:'resourceGrid'
}]
});
为panel添加click事件
listeners:
{
'render': function(panel) {
panel.ariaEl.on('click', function(e,target) {
//do something
},panel);
}
}
Grid
定义&常用属性
Ext.define('MySecurity.view.role.RoleGrid', {
extend: 'Ext.grid.Panel',
requires:[
'MySecurity.store.role.RoleStore',
'MySecurity.view.role.AddRoleWindow',
'MySecurity.view.role.AddResourceToRoleWindow'
],
xtype: 'roleGrid',
//标题
title:'角色',
//gridview设置
viewConfig:{
//是否允许选中表格的数据(供拷贝)
enableTextSelection:true
},
//添加插件
plugins: [{
//折叠表格插件
ptype: 'rowexpander',
rowBodyTpl : app.templates.roleTpl()
}],
initComponent : function() {
var me = this;
//定义列
me.columns = [{
//actioncolumn 用来返回一个带图标的按钮通过getClass方法可以定制显示
xtype:'actioncolumn',text:'修改',align:'center',width:50,
items: [{
iconCls: 'x-fa fa-pencil-square-o', handler: 'editRoleClick',scope:me
},{ //根据数据动态改变图标
getClass: function(v, metadata, record) {
if(record.get('status')=='P' && record.get('verified') )
return 'icon-hide'
else
return 'icon-other'
},
scope: me,
handler: me.deletePerform
}]
},
{
//表头
text: '日期',
//自动换行
cellWrap: true,
xtype: 'datecolumn'
dataIndex: 'name' ,
//拉伸比例
flex:1,
//格式化日期显示
format:'M j, Y',
//是否显示表头的菜单栏
menuDisabled: true,
//是否可以拉表头的位置
draggable: false,
//是否可以拉伸列框
resizable: false,
//是否可以点击表头排序
sortable: false
},
{
text: '描述', dataIndex: 'description',flex:1 ,
//显示内容的渲染器
renderer: function(value, meta, record){
if (!value) return '';
var img = '<img src="./images/right.png">';
return img;
}
}];
//添加分页组件
this.dockedItems = [{
xtype: 'pagingtoolbar',
store: this.store,
dock: 'bottom',
displayInfo: true
}];
//添加 top bur
this.tbar = [{
type: 'button', text: '添加角色' ,
iconCls:'x-fa fa-plus-circle',
handler:me.addRoleClick,scope:me
},{
type: 'button', text: '修改角色资源' ,
iconCls:'x-fa fa-plus-circle',
handler:me.updateResourcesToRoleClick,scope:me
}];
this.store = Ext.create('MySecurity.store.role.RoleStore');
this.callParent(arguments);
}
//省略其他方法
});
分组：
1.开启分组功能(改变分组header显示)
//开启分组功能
this.features = [{
//grouping 为 Ext.enums.Feature 的一种
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true ,
enableGroupingMenu: false //是否开启改变分组菜单
}];
//改变分组header显示:
this.features = [{
ftype: 'grouping',
groupHeaderTpl: Ext.create('Ext.XTemplate',
'<div>{children:this.formatName}</div>',
{
formatName: function(children) {
if(!children.length) return '';
var firstchild = children[0];
return firstchild.data.hierachyName;
}
}
)
}];
2.store设定分组字段
groupField: '分组字段'
编辑:
1.设置编辑的插件
this.plugins = [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
];
2.设置editor
{
text: 'number',
dataIndex: 'number'
name:'baseline',
editor: {
xtype: 'numberfield',
allowBlank:false,
maxValue:100,
minValue:0
}
}
3.重新设置editor
使用beforecellclick事件，使用setEditor() 重新设置editor
this.on('beforecellclick', this.onBeforeCellclick, this);
onBeforeCellclick: function(self, td, cellIndex, record, tr) {
var baseline = this.down('[name ="baseline"]')
var isAllowDecimals = (record.get('kind') == 1);
baseline.setEditor({
xtype: 'numberfield',
allowBlank:false,
allowDecimals : isAllowDecimals,
allowExponential:isAllowDecimals
});
}
4.编辑事件
this.on('edit', this.onEdit, this);
onEdit: function(editor, context) {
}
行号/rownumberer:
{
xtype: 'rownumberer',
text: '#',
renderer: function(value, meta, record, rowIndex ){
return '<div class="my-row-number">' + rowIndex + '</div>';
}
}
选择记录：
1.selModel
this.selctionModel = Ext.create('Ext.selection.CheckboxModel',{
mode : "SINGLE"
})
this.selModel = this.selctionModel;
获取选中的record
this.selctionModel.getSelection();
2.checkcolumn
{
xtype : 'checkcolumn',
dataIndex : 'selectedForName',
listeners:{
checkchange:'onCheckChange',
beforecheckchange:'beforeCheckedChange'
}
}
3.选中第一条record
var selectionModel = this.getSelectionModel();
if (this.store.getCount()) {
selectionModel.selectRange(0, 0);
};
改变行高度:
.x-grid-row{
line-height: 5px;
}
Ext.tree.Panel
定义&属性
this.tree = Ext.create('Ext.tree.Panel', {
flex: 1,
store: Ext.create('MySecurity.store.MyTreeStore'),
//隐藏根节点
rootVisible: false,
columns: [{
//树节点
xtype: 'treecolumn',
flex: 1,
menuDisabled: true,
cellWrap:true,
draggable: false,
resizable: false,
sortable: false,
minWidth: 200,
text: 'name',
dataIndex: 'name',
renderer: function(value, meta, record){
//if (record.get('leaf')) meta.tdCls = 'hide-column';
return value;
}
}, {
flex: 1,
text:'model',
dataIndex: 'model'
}, {
minWidth: 120,
text:'number',
dataIndex: 'number'
}]
});
//数据加载完成的操作
this.tree.store.on('load', this.onTreeStoreLoad, this);
Store & 数据实例
//继承Ext.data.TreeStore
Ext.define('MySecurity.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'MySecurity.model.tree.MyTreeModel',
proxy: {
type: 'ajax',
url: '../controller/getTree'
},
autoLoad: true
});
//继承TreeModel
Ext.define('MySecurity.model.tree.MyTreeModel', {
extend: 'Ext.data.TreeModel',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'model',
type: 'string'
}, {
name: 'bumber',
type: 'string'
}]
});
//data
{
"text": "1",
"children": [{
"name": "tree1",
"children": [{
"name": "node",
"number": 8,
"children": [{
"model": "model1",
"number": "4",
"leaf": true
},
{
"model": "model2",
"number": "4",
"leaf": true
}]
}]
},
{
"name": "tree2",
"children": [{
"name": "node",
"number": 8,
"children": [{
"model": "model13",
"number": "4",
"leaf": true
},
{
"model": "model133434",
"number": "4",
"leaf": true
}]
}]
}]
}
Ext.window.Window
Ext.define('MySecurity.view.RoleWindow', {
extend: 'Ext.window.Window',
width: 400,
height: 160,
//关闭时隐藏
closeAction: 'hide',
//置顶窗口，不能编辑其他组件
modal: true,
layout: 'fit',
//标题
title:'RoleWindow',
initComponent : function() {
this.items =[{html:'test'}];
this.buttons = [{
xtype: 'button',
text: 'Upload',
cls: 'white-btn',
handler: this.onUploadBtnClick,
iconCls: 'btn-iconfont iconfont-upload',
scope: this
}];
this.callParent(arguments);
}
});
var myWindow = Ext.create('MySecurity.view.RoleWindow');
myWindow.show()
myWindow.close();
Ext.window.Toast(消息提示)
Ext.toast(message, title, align, iconCls);
Ext.LoadMask(loading遮罩)
var myPanel = new Ext.panel.Panel({
renderTo : document.body,
height : 100,
width : 200,
title : 'Foo'
});
var myMask = new Ext.LoadMask({
msg : 'Please wait...',
target : myPanel
});
myMask.show();
myMask.hide();
