Extjs4 Grid 的详细设置模版

原因：

   由于EXTJS4.0.7 的升级导致原程序在新版本下许多功能和写法都已改动，导致程序错误，自己根据官方网站研究了以下把Grid的js文件更改了一下已适应新的版本。

例子：[Grid.js]

Ext.Loader.setConfig({
    enabled: true
});


function OperaterMsg() {
    var row = Ext.getCmp("job_id").getSelectionModel().getSelections();
    if (row.length == 0) {
        Ext.Msg.alert("提示信息", "请您至少选择一个!");
    }
    else if (row.length > 1) {
        Ext.Msg.alert("提示信息", "对不起只能选择一个!");
    }
    else if (row.length == 1) {
        Ext.Msg.confirm("提 示!", OperRemark, function (btn) {
            if (btn == "yes") {
                alert('---- yes ------');
                // DelOpenRoomInfo(row[0]);
            }
            else {

            }
        })
    }
}

////------------原GRID读取数据--------------------------------
function GetAshx_Jsondata() {
    Ext.define('MyData', {
        extend: 'Ext.data.Model',
        fields: [{ name: 'job_id', type: 'int' }        //指明 int类型 ，在排序时将按数字大小排序
        , 'job_desc'
        , { name: 'min_lvl', type: 'int' }
        , { name: 'max_lvl', type: 'int' }
        ]
    });


    var mystore = Ext.create('Ext.data.Store', {
        storeId: 'DataStore',
        pageSize: 50,
        autoLoad: true,
        model: 'MyData',
        sorters: ['job_id', 'job_desc'],
        groupField: 'job_desc',
        sortInfo: { field: 'job_desc', direction: "DESC" },
        proxy: {
            type: 'ajax',
            url: '../ashx/TestJobDataParm.ashx?desc=manag',    //'../ashx/TestJobData.ashx','TestJsonData.json', 'JobData.json'  //'GetExtjsData.aspx?parm=List',     
            reader: {
                type: 'json',
                root: 'data',
                id: "job_id",
                totalProperty: 'totalCount'
            }
        }
    });
    //    Ext.Ajax.timeout = 90000;

    // 项目内容输出格式定制 ，可以为超连接
    function renderTopic(value, p, record) {
        return Ext.String.format(
            '<b><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
            value,
            record.data.forumtitle,
            record.getId(),
            record.data.forumid
        );
    }

    //定义右键弹出菜单-PopMenu---------------------start
    var addAction = Ext.create('Ext.Action', {
        //icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
        text: '添加',
        disabled: false,
        minWidth: 80,
        handler: function (widget, event) {
            var rec = grid.getSelectionModel().getSelection()[0];
            if (rec) {
                alert("Add " + rec.get('job_id'));
            } else {
                alert('Please select a company from the grid');
            }
        }
    });
    var editAction = Ext.create('Ext.Action', {
        iconCls: 'buy-button',
        text: '编辑',
        disabled: false,
        minWidth: 80,
        handler: function (widget, event) {
            var rec = grid.getSelectionModel().getSelection()[0];
            if (rec) {
                alert("Edit " + rec.getid());
                //OperaterMsg;
            } else {
                alert('Please select a company from the grid');
            }
        }
    });
    var contextMenu = Ext.create('Ext.menu.Menu', {
        items: [
            addAction,
            editAction
        ]
    });
    //-----------------------------------------end------------------------------

    //统计栏位的输出定制，汉化下拉菜单的中文名称
    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {   
        groupByText: '以这字段组',
        showGroupsText: '是否要分组',
        groupHeaderTpl: '统计值: <font color=blue>{name}</font> (<font color=red>{rows.length}</font> Item{[values.rows.length > 1 ? "s" : ""]})'
    });

    //对列中各值，根据条件不同，更改数值的显示格式，val-当前值，p-单元格属性，r-该条记录，通过r.get('字段')可获值
    function valChange(val, p, r) {
        if (val > 50) {
            return '<span style="color:blue;">' + val + '</span>';
        } else if (val < 50) {
            if (val > 15 && val < 30) {
                p.style = "background-color:yellow;";
            }
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    };

    function job_desc_format(val, p, r) {
        //p.style = "background-color:yellow;";   //单元格属性设置 P为单元格对象
        //return Ext.String.format('<a href="http://html{0}.asp" target="_blank">{1}_{2}_{3}</a>', r.get('job_id'), val, r.get('min_lvl'), r.getId());
        return Ext.String.format('<a href="http://html.asp?it={0}" target="_blank">{1}_{2}_{3}</a>', val, val, r.get('min_lvl'),r.getId());
    }

    //---------创建行序号----------------------
    var rowNumber = Ext.create('Ext.grid.RowNumberer', {
        width: 50,
        text: '序号'
    });

    //-------------------------------------创建Grid----start------------------------------------------
    var sm = Ext.create('Ext.selection.CheckboxModel');   //---创建checkBox 列
    var grid = Ext.create('Ext.grid.Panel', {
        store: 'DataStore',   //'DataStore',JsonStore
        selModel: sm,         //---checkbox 模式
        collapsible: false,
        iconCls: 'icon-grid',
        frame: true,           //显示Grid整个框架
        height: 800,
        width: 880,
        x: 20,
        y: 20,
        title: '测试分组Grid',
        //selType: 'cellmodel',   //选择单元/行模式,"rowmodel"整行选中，默认值
        border: true,
        loadMask: true,
        columnLines: true,    //显示列线
        //分组设置部分---------------start
        features: groupingFeature,
        //        features: [{ ftype: 'grouping'}],
        //分组设置部分---------------end
        viewConfig: {
            id: 'gv',
            trackOver: false,   //选择行背景取消
            stripeRows: true,   //斑马线
            listeners: {
                itemcontextmenu: function (view, rec, node, index, e) {
                    e.stopEvent();
                    contextMenu.showAt(e.getXY());
                    return false;
                }
            }
        },
        columns: [rowNumber,                  //调用创建序号对象 //Ext.create('Ext.grid.RowNumberer'),
            {
                text: "ID",
                width: 50,
                dataIndex: 'job_id',
                sortable: true,      //是否可以排序
                hidden: false    //隐藏列
            }, {
                text: "工作说明",
                width: 200,
                dataIndex: 'job_desc',
                //editor: 'textfield',          //允许编辑字段 但好象没用？？？？？？？？
                renderer: job_desc_format,     //function (val, p, r) { return '<a href="abc.aspx">' + val + '</a>'; },   //job_desc_format,   
                sortable: true
            }, {
                text: "最小等级",
                width: 80,
                dataIndex: 'min_lvl',
                renderer: valChange,
                sortable: true
            }, {
                text: "最大等级",
                width: 80,
                dataIndex: 'max_lvl',
                sortable: true
            }
        ],
        fbar: ['->', {
            text: 'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler: function () {
                groupingFeature.disable();
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            layout: {
                pack: 'center'   //放置位置
            },
            items: [addAction, editAction]      //[{text: 'add'},{text:'delete'}]
        }, {
            xtype: 'pagingtoolbar',
            //store: 'DataStore',   // same store GridPanel is using
            dock: 'bottom',
            ui:'footer',
            layout: {
                pack: 'center'   //放置位置
            },
            items: [{ text: 'save' }, { text: 'cancel'}],
            displayInfo: true
        }, {
            xtype: 'toolbar',
            dock: 'bottom',
            //ui: 'footer',    //显示button框
            //store: 'DataStore',   // same store GridPanel is using
            items: [{text:'save'},{text:'cancel'}],
            displayInfo: false
        }],
        renderTo: Ext.getBody()
    });
    //-------------------------------------创建Grid----end------------------------------------------

    //选择事件触发
    grid.getSelectionModel().on({
        selectionchange: function(sm, selections) {
            if (selections.length) {
                addAction.enable();
                editAction.enable();
            } else {
                addAction.disable();
                editAction.disable();
            }
        }
    });

};

//-------------------------------------------程序开始--------------------------------------------
Ext.onReady(function () {
//    Ext.Msg.alert('提示信息', '学习EXTJS');
    GetAshx_Jsondata();
})