Ext Grid 综合

今晚,说不出的高兴,折磨了我好久的Grid终于可以按搜索条件分页了,激动啊....

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->function listStudent() {
    function renderSex(value) {
        if (value == 'boy') {
            return "男";
        } else {
            return "女";
        }
    }
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
                header : '编号',
                dataIndex : 'id',
                width : 80,
                sortable : true
            }, {
                header : '名称',
                dataIndex : 'name',
                width : 80
            }, {
                header : '性别',
                dataIndex : 'sex',
                renderer : renderSex
            }, {
                header : '日期',
                dataIndex : 'date',
                width : 100,
                renderer : Ext.util.Format.dateRenderer('Y-m-d')
            }, {
                header : '描述',
                dataIndex : 'descn',
                width : 200
            }]);
    var ds = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : '/ext/list.jspa'
                        }),
                reader : new Ext.data.JsonReader({
                            totalProperty : 'total',
                            root : 'persons'
                        }, [{
                                    name : 'id'
                                }, {
                                    name : 'name'
                                }, {
                                    name : 'sex'
                                }, {
                                    name : 'date',
                                    type : 'date',
                                    dateFormat : 'Y-m-dTH:i:s'
                                }, {
                                    name : 'descn'
                                }])
            });
    ds.load({
                params : {
                    start : 0,
                    limit : 18
                }
            });
            
    ds.on('beforeload',function(){
      Ext.apply(
      this.baseParams,
      {
           title:Ext.get('title').dom.value
      });
    });

    var grid = new Ext.grid.GridPanel({
                el : 'grid',
                ds : ds,
                cm : cm,
                sm : sm,
                border : false,
                autoExpandColumn : 5,
                tbar : ['关键字查询：', {
                            xtype : 'textfield',
                            width : 200,
                            id : 'title',
                            name : 'title'
                        }, {
                            text : '搜索',
                            iconCls : 'search',
                            handler : function() {
                                ds.load({
                                            params : {
                                                start : 0,
                                                limit : 18,
                                                title : Ext.get('title').dom.value
                                            }
                                        })
                            }
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '发布',
                            iconCls : 'edit'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '查看',
                            iconCls : 'copy'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '刷新',
                            iconCls : 'refresh'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '回复',
                            iconCls : 'post'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '删除',
                            iconCls : 'del'
                        }],
                bbar : new Ext.PagingToolbar({
                            pageSize : 18,
                            store : ds,
                            displayInfo : true,
                            displayMsg : '第{0} 到 {1} 条数据 共{2}条',
                            emptyMsg : '没有数据'
                        })
            });
    grid.render();
}
Ext.onReady(listStudent);