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);
}
//省略其他方法
});
分組：
//開啟分組功能
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();
