如何动态添加gridPanel的列

动态添加gridPanel的列的实例

 

gridPanel前面3列为固定的，后面4列动态从数据库读取

 

function getDataPanel() {
    var cmItems = [];
    var cmConfig = {};
    cmItems.push(new Ext.grid.RowNumberer());
    // 固定列部分
    cmItems.push({
                header : "學生",
                dataIndex : 'student',
                width : 100,
                renderer : function(value, cellmeta, record) {
                    var name = record.get("student").nameCn;
                    return name;
                }
            });
    cmItems.push({
                header : "段考",
                dataIndex : 'semester',
                width : 100,
                renderer : function(value, cellmeta, record) {
                    var semester = record.get("semester");
                    var result = " ";
                    result += semester.year + '第' + (semester.index + 1) + '段考';
                    return result;
                }
            });
    cmItems.push({
                header : "分紙",
                width : 100,
                dataIndex : 'scoreSheet'
            });

    var results; // 动态列部分以及取值
    Ext.Ajax.request({
                method : 'POST',
                url : "/erips/portfolio/srcs/getScoreSheetHeaders。htm",
                async : false,
                success : function(response) {
                    results = Ext.util.JSON.decode(response.responseText).root;
                }
            });
    var columns = results;
    for (var i = 0; i < columns.length; i++) {
        cmConfig = {
            header : columns[i].header,
            dataIndex : columns[i].dataIndex,
            sortable : true,
            renderer : function(value, cellmeta, record, rowIndex, columnIndex) {
                var scores = record.get("scores");
                var score = scores[columnIndex - columns.length];
                if (score < 60) {
                    return "<span style="color:red" mce_style="color:red">" + score + "</span>";
                }
                return score;
            }
        }
        cmItems.push(cmConfig);
    }

    var cm = new Ext.grid.ColumnModel(cmItems);
    var store = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : '/erips/portfolio/srcs/getScoreSheet。htm',
                            baseParams : {
                                cmd : 'semesterId'
                            }
                        }),
                reader : new Ext.data.JsonReader({
                            totalProperty : 'totalCount',
                            successProperty : 'success',
                            idProperty : 'id',
                            root : 'root'
                        }, [{
                                    name : 'student'
                                }, {
                                    name : 'semester'
                                }, {
                                    name : 'scoreSheet'
                                }, {
                                    name : 'scores'
                                }]),
                writer : getWriter()
            });

    var data_Panel = new Ext.grid.GridPanel({
                id : 'data_Panel',
                trackMouseOver : true,// 鼠标移到上面会高亮显示
                border : false,
                hidden : true,
                stripeRows : true,
                autoDestroy : false,
                // collapsible : true,// 是否可以展开
                animCollapse : false,// 展开时是否有动画效果
                store : store,
                defaults : {
                    anchor : "100%",
                    padding : '5 5 5 5'
                },
                cm : cm,
                viewConfig : {
                    forceFit : true
                }
            });

    return data_Panel;
}

 

文章转载自：    动态添加gridPanel的列和数据     http://www.studyofnet.com/news/423.html