动态对ext grid添加列

var GenerGrid = { 
    data: null, 
    url_data: null,//Grid数据源 
    url_column: null,//列数据源 
    _width: null,//宽度 
    _height: null,//高度 
    _pagesize: null,//每页显示数据数 
    romanceContainer: null,//渲染Grid的容器 
    //hiddenColumnCount: null, //隐藏的列数，默认无隐藏列 
    enableChecked: false,//是否有CheckBox，默认为无。 
    grid: null, 
    ToHrefField: null,//链接列 
    ToHrefUrl: null,//链接地址 
    ToHref: function(value) { 
        return '<a href=" + GenerGrid.ToHrefUrl + " mce_href=" + GenerGrid.ToHrefUrl + ">' + value + '</a>'; 
    }, 
    GenerData: function() { 
//动态添加列，这是关键代码 
        var addColumn = function() { 
            this.fields = ''; 
            this.columns = ''; 
            this.addColumns = function(name, caption) { 
                if (this.fields.length > 0) { 
                    this.fields += ','; 
                } 
                if (this.columns.length > 0) { 
                    this.columns += ','; 
                } 
                this.fields += '{name:"' + name + '"}'; 
                this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100,sortable:true}'; 
            }; 
        }; 
        //从服务器端获取列，然后动态添加到ColumnModel中 
        Ext.Ajax.request({ 
            url: GenerGrid.url_column, 
            success: function(response, option) { 
                if (response.responseText == "") { 
                    return; 
                } 
                GenerGrid.data = new addColumn(); 
                var res = Ext.util.JSON.decode(response.responseText); 
                for (var i = 0; i < res.length; i++) { 
                    for (var p in res[i]) { 
                        GenerGrid.data.addColumns(p, p); 
                    } 
                } 
                //动态生成GridPanel 
                makeGrid(); 
            }, 
            failure: function() { 
                Ext.Msg.alert("消息", "查询出错请查看语句是否配置正确"); 
            } 
        }); 
        //动态生成GridPanel 
        var makeGrid = function() { 
            var cm = new Ext.grid.ColumnModel(eval('([' + GenerGrid.data.columns + '])')); 
            cm.defaultSortable = false; 
            var fields = eval('([' + GenerGrid.data.fields + '])'); 
            var newStore = new Ext.data.Store({ 
                proxy: new Ext.data.HttpProxy({ 
                    url: GenerGrid.url_data 
                }), 
                reader: new Ext.data.JsonReader({ 
                    totalProperty: "totalPorperty", 
                    root: "result", 
                    fields: fields 
                }) 
            }); 
            newStore.load({ 
                params: { 
                    start: 1, 
                    limit: 16 
                } 
            }); 
            var pagingBar = new Ext.PagingToolbar({ 
                         displayInfo: true, 
                         emptyMsg: "没有数据显示", 
                         displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据", 
                         store: newStore, 
                         pageSize: GenerGrid._pagesize, 
                     items: ['-', { 
                                pressed: true, 
                                enableToggle: true, 
                                text: '导出Excel', 
                                cls: 'x-btn-text-icon details', 
                                icon: "../images/plugin.gif", 
                                toggleHandler: function(btn, pressed) { 
                                        var title = "数据下载"; 
                                        //如果是作为uri后面的参数传值，那就需要对字符进行编码                                 
                                        //如果是通过post的方式传数据，就不要做任何的编码                                 
                                        var cols = eval(cm); 
                                        var header = ""; 
                                        var dataIndex = ""; 
                                        for (var i = 0; i < cols.config.length; i++) { 
                                                header += cols.config[i].header + ","; 
                                                dataIndex += cols.config[i].dataIndex + ","; 
                                        } 
                                        var uri = "DataStore.aspx?param=ExpExcel" + "&filename=" + escape(title) + "&header=" + header + "&dataIndex=" + dataIndex; 
                                        window.location.href = uri; 
                                } 
                        }, 
                        '-'] 
            }); 
            var gridPanel = new Ext.grid.GridPanel({ 
                cm: cm, 
                id: "grid_panel", 
                loadMask: { 
                    msg: '正在加载数据，请稍侯. . . . . .' 
                }, 
                renderTo: GenerGrid.romanceContainer, 
                store: newStore, 
                frame: true, 
                border: true, 
                layout: "fit", 
                pageSize: GenerGrid._pagesize, 
                //width:GenerGrid._width, 
                height: GenerGrid._height, 
                viewConfig: { 
                    forceFit: true 
                }, 
                columnLines: false, 
                bbar: pagingBar 
            }); 
            GenerGrid.grid = gridPanel; 
        }; 
    } 
} 
页面调用：
var gdate=function init(Container_id,sqlid) { 
            Ext.Msg.alert("提示消息",sqlid);//测试用的 
            GenerGrid.url_data = "DataStore.aspx?sqlid="+sqlid+"¶m=griddata"; //Grid数据源 
            GenerGrid.url_column = "DataStore.aspx?sqlid="+sqlid+"¶m=gridcolumn"; //列数据源 
            //GenerGrid._width =Ext.get(Container_id).getComputedWidth(); //宽度 
            GenerGrid._height = 360; //高度 
            GenerGrid.romanceContainer = Container_id; //渲染Grid的容器 
            GenerGrid._pagesize = 20; //每页显示数据数 
            GenerGrid.enableChecked = false; //是否有CheckBox，默认为无。 
            GenerGrid.ToHrefField = "TypeCName"; 
            GenerGrid.ToHrefUrl = "about:blank"; 
            GenerGrid.GenerData(); 
        } 
 
........ 
 
......gdate(dtime,_TypeID); 

评论

1 楼 汽车城路 2013-08-29  

根据数据库里的字段来动态添加grid列，你实现了么？