Grid是一个表格组件,是后台管理系统中最常用的。经常用来展示数据用,它涉及到表头的定义,表格底部tab工具栏,表数据的展示,以及头部查询框等。针对每一个部分,都会单独拿出来讲。
一、理解Grid组件
1. 查看官网文档 ~~ 在右上角的搜索栏直接搜索:grid
2. 剖析理解Crid~~important
【理解:】在grid.Panel中,值得关注的有两个属性。columns 和 store 。columns定义表头,这里推荐一个函数renderer:function(value){//对返回的数据结果进行进一步的加工,渲染数据输出来的}。这里是通过column的dataIndex属性跟store模型中的name值对应起来,那么它就会把数据渲染到这一列上。
store就不用说了。数据源。上面已经详细介绍。
【总结来说:】
根据上述的Demo,我们知道,如果想要展示某个grid的数据,必须有一个store,而store必须有一个model。
二、入门案例~~基于上述的说明,对Grid表格有一定的认识。
1、 最简单的grid
1)定义好columns:因为要展示的数据很多,单独分开来写
2)先定义好grid,参考上面的demo
这样就可以了。
三、介绍表格底部的工具栏~~ bbar
核心:在于数据源的加载,得到数据源的话,总条数,跟第几页都能够知道了。
这其实也没有什么好讲的。
bbar : new Ext.PagingToolbar({
store : Ext.data.StoreManager.lookup('simpsonsStore'),
displayInfo : true,
displayMsg : '第 {0} - {1} 条 共 {2} 条 000',
emptyMsg : "没有记录"
}),
四、介绍表格头部的搜索框~~dockedItems ,其实呢,这已经算一个form组件,针对form组件就不在多讲,直接看这个案例就可以。这里介绍form常规组件的使用
Ext.define('Admin.view.myToolbar', {
extend:'Ext.toolbar.Toolbar',
id:"myfirstDefine",
xtype: 'myfirstDefine',
dock: 'top',
autoScroll:true,
items: [ {
xtype: 'combobox',
fieldLabel: '等级1',
labelWidth:40,
matchFieldWidth:false,
name:'level',
width:150,
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{"value":"HIGH", "name":"高"},
{"value":"MEDIUM", "name":"中"},
{"value":"LOW", "name":"低"}
]
}),
queryMode: 'local',
displayField: 'name',
valueField: 'value'
},"ID:",{
xtype : 'numberfield',
id:'roleId',
hideTrigger:true,
emptyText : '请输入一个ID'
},"-", "角色账号:",{
xtype : 'textfield',
id:"accountId",
emptyText : '请输入一个角色账号'
},{
xtype : 'button',
text :'查询',
handler: function() {
fileSelect();
}
}]
});