ExtJs4之Grid详细

由于这段时间事情比较杂乱，博客就主要以项目中例子来说明编写。

ExtJs4中的Grid非常强大，有展示，选中，搜索，排序，编辑，拖拽等基本功能，这篇博客我就这几个功能做写累述。

1.ExtJs4之Grid详细

2.ExtJs4之TreePanel

Grid的展示选中排序选中事件。

附图：

代码：

<script type="text/javascript">
        Ext.onReady(function () {
            var store = Ext.create('Ext.data.Store', {
                fields: ["cataId", "cataNo", "cataRemark", "cataTitle", "cataObjectName", "cataeditstatusName",
                     "cataPublishName", "cataEndDate", "holyUpdateTime", "catapushtime"],
                pageSize: 20,  //页容量5条数据
                //是否在服务端排序 （true的话，在客户端就不能排序）
                remoteSort: false,
                remoteFilter: true,
                proxy: {
                    type: 'ajax',
                    url: '/Tools/106.ashx?method=getAllCatalog',
                    reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
                        type: 'json', //返回数据类型为json格式
                        root: 'rows',  //数据
                        totalProperty: 'total' //数据总条数
                    }
                },
                sorters: [{
                    //排序字段。
                    property: 'ordeId',
                    //排序类型，默认为 ASC 
                    direction: 'desc'
                }],
                autoLoad: true  //即时加载数据
            });

            var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            store: store,
            height: 400,
            width:800,
            selModel: { selType: 'checkboxmodel' },   //选择框
            columns: [                    
                          { text: '型录ID', dataIndex: 'cataId', align: 'left', maxWidth: 80 },
                          { text: '型录编号', dataIndex: 'cataNo',  maxWidth: 120 },
                          { text: '助记标题', dataIndex: 'cataTitle', align: 'left', minWidth: 80 },
                          { text: '应用对象', dataIndex: 'cataObjectName', maxWidth: 80, align: 'left' },                        
                          { text: '发布状态', dataIndex: 'cataPublishName', maxWidth: 80 },
                          { text: '活动截止日期', dataIndex: 'cataEndDate',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s' },
                          { text: '更新时间', dataIndex: 'holyUpdateTime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'},
                          { text: '发布时间', dataIndex: 'catapushtime',xtype:'datecolumn',dateFormat :'Y-m-d H:i:s'}
                       ],
            bbar: [{
                xtype: 'pagingtoolbar',
                store: store,
                displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
                emptyMsg: "没有数据",
                beforePageText: "当前页",
                afterPageText: "共{0}页",
                displayInfo: true                 
            }],
             listeners: { 'itemclick': function (view, record, item, index, e) {
               Ext.MessageBox.alert("标题",record.data.cataId);
            }
            },
             tbar:[
             {text:'新增',iconCls:'a_add',handler:showAlert},"-",
             {text:'编辑',iconCls:'a_edit2',handler:showAlert},"-",
             {text:'停用/启用',iconCls:'a_lock'},"-",
             {text:'发布',iconCls:'a_upload',handler:showAlert},"-",
             {text:'组织型录',iconCls:'a_edit',handler:showAlert},"-",
             {text:'管理商品',iconCls:'a_edit',handler:showAlert},"-",
             "->",{ iconCls:"a_search",text:"搜索",handler:showAlert}], 
        });

function showAlert (){
      var selectedData=grid.getSelectionModel().getSelection()[0].data;

      Ext.MessageBox.alert("标题",selectedData.cataId);
 }

}); 

</script>

注释：

一、gridPanel几个必须配置的项：store（数据格式组织、存储），columns(展示到页面的格式，数据组织)。

      1、store里面有个fields配置，为需要的数据字段，跟读取到的数据（本地，或远程获取的）字段对应。

      2、columns中的text为grid展示的列标题，dataIndex绑定字段与store中fields配置字段的对应。

二、数据获取

 proxy: {
                    type: 'ajax',
                    url: '/Tools/106.ashx?method=getAllCatalog',
                    reader: {   //这里的reader为数据存储组织的地方，下面的配置是为json格式的数据，例如：[{"total":50,"rows":[{"a":"3","b":"4"}]}]
                        type: 'json', //返回数据类型为json格式
                        root: 'rows',  //数据
                        totalProperty: 'total' //数据总条数
                    }
                },
                sorters: [{
                    //排序字段。
                    property: 'ordeId',
                    //排序类型，默认为 ASC 
                    direction: 'desc'
                }],

     1、传递的参数为：method=getAllCatalog&page=1&start=0&limit=20&sort=[{"property":"ordeId","direction":"desc"}]

     2、传回数据为：{"rows": [{"rowNum":"1","cataId":"852","cataNo":"10000809","cataTitle":"","cataObject":"4","cataObjectName":" 华悦购物","cataType":"1","cataTypeName":"默 认","cataeditstatus":"2","cataeditstatusName":"待提 交","cataPublishStatus":"2","cataPublishName":"已发布","cataRemark":"banner广 告","cataObjectType":"2","apptypename":"销 售","cataEndDate":"2014-09-27","holyCreateTime":"2013-11-24 16:02:04","holyUpdateTime":"","catapushtime":"","holyCreateUser":"lhcs"}]}

三、分页（不带搜索条件）：         

bbar: [{
                xtype: 'pagingtoolbar',
                store: store,
                displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
                emptyMsg: "没有数据",
                beforePageText: "当前页",
                afterPageText: "共{0}页",
                displayInfo: true                 
            }]