ExtJs学习（四）~~Grid组件

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();
        }
    }]
});

 以上的话，你可以看到：form的input跟combobox组件的用法，其他组件类似，直接查询API，修改xtype的值即可

五、效果图如下~~ 

到了这一步，基本上我们就可以进入开发了。