Ext.grid.GridPanel

Ext.grid.GridPanel

* 创建GridPanel
1 创建数据对象store
    var centerStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: '<c:out value="${path}"/>/marcInfo.htm?method=marcInfoQuery'
        }),
        reader: new Ext.data.JsonReader({
                totalProperty: 'totalProperty',
                root: 'marcInfoArr'
            },
            Ext.data.Record.create([
                {name: 'marcNo',type: 'string'},
                {name: 'marcName',type: 'string'},
                {name: 'marcDesc',type: 'string'},
                {name: 'marcSpec',type: 'string'},
                {name: 'marcUnit',type: 'string'},
                {name: 'lastPrice',type: 'float'},
                {name: 'statusRmk',type: 'string'},
                {name: 'marcKind',type: 'string'},
                {name: 'createUser',type: 'string'},
                {name: 'createDate',type: 'string'},
                {name: 'modifyUser',type: 'string'},
                {name: 'modifyDate',type: 'string'}
            ]))
    });
    centerStore.setDefaultSort('marcNo', 'asc');

2 创建数据行模型column model

    var centerColModel = new Ext.grid.ColumnModel({
        columns: [
            new Ext.grid.RowNumberer(),//行数号
            {header: "物料编码", width: 120, dataIndex: 'marcNo'},
            {header: "物料描述", width: 200, dataIndex: 'marcDesc'},
            {header: "物料规格", width: 200, dataIndex: 'marcSpec'},
            {header: "品名", width: 120, dataIndex: 'marcName'},
            {header: "单位", width: 80, dataIndex: 'marcUnit'},
            {header: "最近采购价格", width: 100, dataIndex: 'lastPrice',
                renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                    if(value == 0){
                        return '';
                    }
                    return value+'元';
                  }
            },
            {header: "状态", width: 100, dataIndex: 'statusRmk',
                renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                    switch (value){
                        case '1': return '正常使用';
                        case '2': return '冻结状态';
                        case '3': return '删除';
                    }
                    return '';
                  }
            },
            {header: "物料类别", width: 100, dataIndex: 'marcKind',
                renderer: function(value, metaData, record, rowIndex, colIndex, store) {
                    switch (value){
                        case '1': return '费用性物料';
                        case '2': return 'SAP物料';
                    }
                    return '';
                  }
            },
            {header: "创建者", width: 120, dataIndex: 'createUser'},
            {header: "创建时间", width: 120, dataIndex: 'createDate' ,align: 'center'},
            {header: "最后更改人", width: 120, dataIndex: 'modifyUser'},
            {header: "最后更改时间", width: 120, dataIndex: 'modifyDate' ,align: 'center'}
        ],
        defaults: {
            sortable: true,
            menuDisabled: false,
            align: 'left'
        }
    });

3 创建 中央表格 GridPanel

    var centerGrid = new Ext.grid.GridPanel({
        id: 'centerGrid',
        ds: centerStore,
        border: false,
        region: 'center',
        stripeRows: true,
        loadMask: {msg:'Loading……'},
        colModel: centerColModel,
        sm: new Ext.grid.RowSelectionModel({
                    singleSelect:true
                }),
        viewConfig: {
            enableRowBody: true,
            showPreview: false,
            getRowClass: function (record,rowIndex,p,store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.description+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
        //分页工具栏
        bbar: new Ext.PagingToolbar({
            params: {
                start: 0,
            limit: 50
            },
            pageSize: 50,
            store: centerStore,
            displayInfo: true,
            displayMsg: '显示数据从 第{0}条 - 第{1}条 共{2}条记录',
               emptyMsg: '无数据显示！',
               items: [
                   '-',
                   {
                       pressed: false,
                       enableToggle: false,
                       //text: 'Show Preview',
                       cls: 'x-btn-text-icon details',
                       toggleHandler: function(btn,pressed){
                           var view = centerGrid.getView();
                           view.showPreview = pressed;
                           view.refresh();
                       }
                   }
               ]
        })
    });

4 制定右键菜单：
    var rightMenu = new Ext.menu.Menu({
        id: 'defmenu',
        style: {
            overflow: 'visible'     // For the Combo popup
        },
        items: [{
            text: '修改',
            handler: indexFun.update
            }]
    });

5 显示右键菜单：

    centerGrid.addListener("contextmenu",function(e){
            var target = e.getTarget();
            e.preventDefault();
            rightMenu.showAt(e.getXY()); 
            var view = centerGrid.getView();
            var rowIndex = view.findRowIndex(target);
            centerGrid.getSelectionModel().selectRow(rowIndex);
        }
    );

6 设置基本参数：

    centerGrid.addListener('beforeload',function(){
            centerStore.setBaseParam("marcNo",marcNo.getValue());
            centerStore.setBaseParam("marcDesc",marcDesc.getValue());
            centerStore.setBaseParam("statusRmk",statusRmk.getValue());
            centerStore.setBaseParam("marcKind",marcKind.getValue());
            centerStore.setBaseParam("startDate",indexFun.getDateFieldFormatValue(startDate));
            centerStore.setBaseParam("endDate",indexFun.getDateFieldFormatValue(endDate));
        }
    );
7 加载数据：
centerStore.load({
    params: {
        start: 0,
        limit: 50,
        marcNo :marcNo.getValue(),
        marcName :marcName.getValue(),
        marcDesc :marcDesc.getValue(),
        statusRmk :statusRmk.getValue(),
        marcKind :marcKind.getValue(),
        startDate :indexFun.getDateFieldFormatValue(startDate),
        endDate :indexFun.getDateFieldFormatValue(endDate),
        queryFromForm :true
    },
    callback: function(r, options, success) {
        if (!success) {
            centerStore.removeAll();
        }
    }
});

8 centerrGrid.getView().refresh(); //可以使列号正确显示