EXTJS学习笔记：grid之分组实现groupingview

     使用extjs开发时常会用到 grid来显示数据等操作，Extjs中Grid主要分为以下二类:
   一、gridview
   二、groupingview
    gridview在前面已说过，在这里我来说说groupingview的使用方法， 在EXTJS里，实现很简单，只需要简单设置下就可以实现。具体可以参照EXTJS学习笔记：grid之gridview。 
在这里要注意使用的是GroupingStore而不是Store，其中重点是要设置groupField的值 ，该字段表示默认的分组字段。由于与GridView类似，所在不详细说明，先把截图先贴出来，让大家看下有多酷。

在这里实现了按父菜单分组，当然也可以实现任意一列的分组，方法是选某列，在出现的下拉列表（如下图所示）中，




选择“根据本列分组”

下面我把源代码放出来，
源代码：

/*
*  菜单管理
*  MenuInfoManage.js
* author:☆会飞的鱼☆
* date 2009-10-15 
*/

var MenuInfoStore;
MenuInfoManage = function(node) {

    var pmenufields = Ext.data.Record.create([
            { name: 'menucode', mapping: 'menucode' }, { name: 'menuname', mapping: 'menuname' }
        ]);
    var pmenustore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'UI/MenuInfo/GetAllPMenuInfo.aspx'
        }),
        reader: new Ext.data.JsonReader({
            root: 'data',
            id: 'menucode'
        },
            pmenufields
            )
    });
    pmenustore.load();


    var fields = ["menuid", "menucode", "menuname", "pmenucode","pmenuname", "menuurl", "state", "remark"];
    MenuInfoStore = new Ext.data.GroupingStore({
        proxy: new Ext.data.HttpProxy({
            url: "UI/MenuInfo/MenuInfoManager.aspx",
            method: "POST"
        }),
        reader: new Ext.data.JsonReader({
            fields: fields,
            root: "data",
            dataIndex: "menuid",
            totalProperty: "totalCount"
        }),
        groupField: 'pmenuname',//默认的分组字段
        sortInfo: { field: 'menucode', direction: "ASC" }
    });

    MenuInfoStore.load({ params: { limit: pageSize, start: 0} });

    var sm = new Ext.grid.CheckboxSelectionModel({
        dataIndex: "menuid"
    });

    var cm = new Ext.grid.ColumnModel([sm,
    {
        header: "菜单名称",
        dataIndex: "menuname",
        tooltip: "菜单名称",
        sortable: true
    }, {
        header: "父菜单",
        dataIndex: "pmenucode",
        tooltip: "父菜单",
        hidden: true,
        hideable:false
    }, {
        header: "父菜单",
        dataIndex: "pmenuname",
        tooltip: "父菜单",
        sortable: true
    }, {
        header: "菜单URL",
        dataIndex: "menuurl",
        tooltip: "菜单URL",
        sortable: true
    }, {
        header: "状态",
        dataIndex: "state",
        tooltip: "状态",
         40,
        sortable: true,
        renderer: function(value) {
            if (value == 0) {
                return "<b><font color=red>无效</font></b>";
            } else if (value == 1) {
                return "有效";
            }
        },
        editor: new Ext.form.ComboBox({
            store: new Ext.data.SimpleStore({
                data: [["无效", "0"], ["有效", "1"]],
                fields: ["text", "value"]
            }),
            tpl: '<tpl for="."><div ext:qtip="设置菜单状态为--{text}" class="x-combo-list-item">{text}</div></tpl>',
            displayField: "text",
            mode: "local",
            valueField: "value",
            triggerAction: "all"
        })
    }, {
        header: "备注",
        dataIndex: "remark",
        tooltip: "备注",
        sortable: true
}]);

        var MenuGrid = new Ext.grid.GridPanel(
        {
            id: "MenuGrid",
            store: MenuInfoStore,
            sm: sm,           //CheckboxSelectionModel
            cm: cm,           //ColumnModel
            loadMask: true,
            autoScroll: true, //超过长度带自动滚动条
            border: false,
            view: new Ext.grid.GroupingView({
                forceFit: true,                 //自动填充
                sortAscText: '正序排列',
                sortDescText: '倒序排列',
                columnsText: '列显示/隐藏',
                groupByText: '根据本列分组',
                showGroupsText: '是否采用分组显示',
                groupTextTpl: '{text}(<b><font color=red>{[values.rs.length]}</font></b>     {[values.rs.length > 0 ? "个子菜单" : "暂无子菜单信息"]})'
/*groupTextTpl: '{group}(<b><font color=red>{[values.rs.length]}</font></b> {[values.rs.length > 0 ? "个子菜单" : "暂无子菜单信息"]})'    -------text=header+":"+group
*/
            }),
            //分页
            bbar: new Ext.PagingToolbar({
                store: MenuInfoStore,
                pageSize: pageSize,
                //显示右下角信息
                displayInfo: true,
                displayMsg: '当前记录 {0} -- {1} 条 共 {2} 条记录',
                emptyMsg: "No results to display",
                prevText: "上一页",
                nextText: "下一页",
                refreshText: "刷新",
                lastText: "最后页",
                firstText: "第一页",
                beforePageText: "当前页",
                afterPageText: "共{0}页"

            }),
            tbar: [
            new Ext.Toolbar.Fill()
             , "", "-", "", {
                 text: "新增根菜单",
                 tooltip: "新增根菜单信息",
                 iconCls: "addicon",
                 handler: AddPMenuInfoFn
             }, "", "-", "", {
                 text: "新增",
                 tooltip: "新增菜单信息",
                 iconCls: "addicon",
                 handler: AddMenuInfoFn
             }, "", "-", "", {
                 text: "编辑",
                 tooltip: "编辑菜单信息",
                 iconCls: "editicon",
                 handler: EditMenuInfoFn
             }, "", "-", "", {
                 text: "删除",
                 tooltip: "删除菜单信息",
                 iconCls: "deleteicon",
                 handler: DelMenuInfoFn
             }, "-"],
            listeners: {
                'contextmenu': function(e) {
                    e.stopEvent();
                }
            }
        });
        GridMain(node, MenuGrid, "menuicon");
    }

    function AddPMenuInfoFn() {
        AddPMenuInfo();
    }

    function AddMenuInfoFn() {
        AddMenuInfo();
    }
    function EditMenuInfoFn() {

        var row = Ext.getCmp("MenuGrid").getSelectionModel().getSelections();
        if (row.length == 0) {
            Ext.Msg.alert("提示信息", "您没有选中任何行！");
        }
        else if (row.length == 1) {
        if (row[0].data.pmenucode == "1") {
            EditPMenuInfo(row[0]);
        }
        else {
            EditMenuInfo(row[0]);
        }

        }
        else {
            Ext.Msg.alert("提示信息", "对不起只能选择一个！");
        }
    }

    function DelMenuInfoFn() {
        var row = Ext.getCmp("MenuGrid").getSelectionModel().getSelections();
        if (row.length == 0) {
            Ext.Msg.alert("提示信息", "您没有选中任何行！");
        }
        else {

            Ext.Msg.confirm("提示信息", "您确定要删除选中的 " + row.length + " 条常用语吗", function(btn) {

                if (btn == "yes") {
                    DelMenuInfo(row);
                }
            })
        }
    }