ExtJs之gridPanel实例

需求

完整的extjs自定义实例（没有异步加载数据）

---

效果图

---

代码：

Ext.define('dxgx.applyApprovalGrid', {
    extend : 'Ext.grid.Panel',
    requires : [''],//多继承，一般继承数据模型
    columnLines: true,//列的间隔线
    multiSelect: true,
    selModel: new Ext.selection.CheckboxModel(),//多选的checkbox
    constructor: function() {
        var me = this;
        me.addEvents({
        });
        me.callParent(arguments);
    },
    initComponent : function() {
        var me = this;
        //没有用到model，直接声明store
        var gridStore = Ext.create("Ext.data.Store", {
            fields: ["pipeType", "state","qsdw", "jsrq", "cz", "gj", "ms"],
            data: [
                { 
                    pipeType: "男",
                    state:"审批", 
                    qsdw: "男", 
                    jsrq: "1996/10/27", 
                    cz: "男", 
                    gj: "男", 
                    ms: "男"
                },
            ]
        });
        //异步加载
        // me.store = Ext.create('Ext.data.Store', {
        //     model : 'fxzl.ReportMaterialInfoModel',
        //     autoLoad : false,
        //     proxy : {
        //         type : 'ajax',
        //         url : me.contextPath + 'seeperDispMaterialDtl/getDataByCondition',
        //         reader : {
        //             type : 'json',
        //             root : 'data'
        //         }
        //     },
        //     listeners : {
        //         'beforeload': function(action, options) {
        //             me.queryDataParam['json'] = Ext.JSON.encode(me.jsonDataParam);
        //             var params = me.queryDataParam;
        //             options.params = new Object();
        //             Ext.apply(options.params, params);
        //         },
        //         'load':function(store, records, successful, eOpts) {
        //         }
        //     }
        // });
        //定义grid中的列

        me.gridColumns= [
            {
                text:"编号",
                xtype: 'rownumberer',//显示编号
                fieldLabel: '编号',
                align:"center",
                width: 40
            },
            {
                text: '状态',
                xtype: 'gridcolumn',//默认的列type
                align:"center",
                width: 150,
                dataIndex: 'operate',
                // align: 'center',
                renderer: function (value, metaData, record) {//往单元格中添加内容
                    var id = metaData.record.id;
                    metaData.tdAttr = 'data-qtip="提示文本"';
                    return Ext.String.format('<div style="width: 30px;height: 
                    20px;background: #dd2c00;margin:auto;text-align: center;line-
                    height: 20px;color: #ffffff;">111</div>', id);
                }
            },
            {
                text : '操作',
                xtype: 'gridcolumn',
                dataIndex : 'state',
                align:"center",
                width : 150,
                renderer: function (value, metaData, record) {
                    return "<a href='javascript:void(0);' onclick='approveHandle();' 
                    style='color: dodgerblue;'>" + value + "</a>";
                }
            },
            {
                text : '管线类型',
                dataIndex : 'pipeType',
                align:"center",
                width : 150
            },
            {
                text : '权属单位',
                dataIndex : 'qsdw',
                align:"center",
                width : 150
            },
            {
                text : '建设日期',
                dataIndex : 'jsrq',
                align:"center",
                width : 150
            },
            {
                text : '材质',
                dataIndex : 'cz',
                align:"center",
                width : 150
            },
            {
                text : '管径',
                dataIndex : 'gj',
                align:"center",
                width : 150
            },
            {
                text : '埋深',
                dataIndex : 'ms',
                align:"center",
                width : 150
            },
            {
                text : '埋深',
                dataIndex : 'ms',
                align:"center",
                width : 150
            },
            {
                text: '操作2',
                xtype: 'actioncolumn',//action通过图片添加触发时间
                align:"center",
                width: 100,
                items: [
                    {
                        tooltip: '更改',
                        icon: "images/edit.png",
                        handler: function(grid, rowIndex, colIndex) {
                            alert(1);
                        }
                    }
                ]
            },
            {
                text: '操作2',
                xtype: 'actioncolumn',
                align:"center",
                width: 100,
                items: [
                    {
                        tooltip: '更改',
                        icon: "images/edit.png",
                        handler: function(grid, rowIndex, colIndex) {
                            alert(1);
                        }
                    }
                ]
            }
        ];

        approveHandle=function () {
            alert(1);
        };

        var tbarSpan = Ext.create("Ext.panel.Panel",{
            border:0,
            html:" <div class='tBarWrap'>" +
            "<span class='tBarSpan'>状态:</span>" +
            "<span class='tBarSpan'>全部</span> " +
            "<div class='stateDIv' style='background:#88CCEA;'></div>" +
            "<span class='tBarSpan'>待审批</span>" +
            "<div class='stateDIv' style='background:#FF66FF;'></div>" +
            "<span class='tBarSpan'>未通过</span>" +
            "<div class='stateDIv' style='background:#66FF33;'></div>" +
            "<span class='tBarSpan'>已同意</span>" +
            "<div class='stateDIv' style='background:#FF0000;'></div>" +
            "<span class='tBarSpan'>快到期</span>" +
            "<div class='stateDIv' style='background:#999999;'></div>" +
            " <span class='tBarSpan'>已过期</span>" +
            "</div>"
        });
        var search = Ext.create("Ext.panel.Panel",{
            id:"applyItemSearch",
            border:0,
            html:"<div class='applyItemSearch'></div>"
        });
        //实现combox下拉框
        var genderStore = Ext.create("Ext.data.Store", {
            fields: ["Name", "Value"],
            data: [
                { Name: "供水管线", Value: "gs" },
                { Name: "排水管线", Value: "ps" },
                { Name: "热力管线", Value: "rl" },
                { Name: "通信管线", Value: "tx" },
                { Name: "工业管线", Value: "gy" },
                { Name: "燃气管线", Value: "rq" }
            ]
        });

        Ext.apply(this, {
            store : gridStore,
            columns : me.gridColumns,
            //上边框
            tbar: [
                tbarSpan,
                {
                    xtype: "combobox",
                    width:170,
                    name: "Gender",
                    labelWidth: 65,
                    fieldLabel: "管线类型",
                    store: genderStore,
                    editable: false,
                    style:"margin-left:400px;",
                    displayField: "Name",
                    valueField: "Value",
                    emptyText: "--查询条件--",
                    queryMode: "local"
                },
                {
                    xtype: "button",
                    id:"applyApproveSearch",
                    width:30,
                    height:25,
                    padding:0,
                    cls: 'icon-custom-add',//依靠class引入
                    handler: function() {
                        alert(1);
                    }
                },
                {
                    xtype: "button",
                    id:"applyApproveDownload",
                    width:30,
                    height:25,
                    padding:0,
                    cls: 'icon-custom-download',//依靠class引入
                    handler: function() {
                        alert(1);
                    }
                }
            ],
            //下边框
            bbar: Ext.create('Ext.PagingToolbar', {
                store: gridStore,
                displayInfo: true
            })
        });
        me.callParent(arguments);
    }
});