ExtJs根据数据源Json数据来动态创建store与columnModel

需求：需要根据数据动态显示Gridpanel的列。

思路：将json数据取出，然后遍历json首行的列。已拼接字符串的形式来生成columnModel和store的fields字段值。

代码如下：

json数据(createcol.json)：

{
                'coders': [
        { 'pro':'ADM','id': '1',  'name': 'McLaughlin', 'descn': 'brett@newInstance.com','test':'test' },
        { 'pro':'RMS','id': '2', 'name': 'Hunter', 'descn': 'jason@servlets.com' },
        { 'pro':'fdks','id': '3',  'name': 'Harold', 'descn': 'elharo@macfaq.com' },
        { 'pro':'fkas','id': '4',  'name': 'Harolds', 'descn': 'elhaross@macfaq.com' },
        { 'pro':'qfks','id': '5',  'name': 'Karolds', 'descn': 'lhaross@macfaq.com' },
        { 'pro':'wfks','id': '6',  'name': 'Yarolds', 'descn': 'elaross@macfaq.com' },
        { 'pro':'efks','id': '7',  'name': 'Jarolds', 'descn': 'elharss@macfaq.com' },
        { 'pro':'rfks','id': '8',  'name': 'Larolds', 'descn': 'elhass@macfaq.com' },
        { 'pro':'tfks','id': '9',  'name': 'Haroldws', 'descn': 'elhaross@macfaq.com' },
        { 'pro':'yfks','id': '10',  'name': 'WHarolds', 'descn': 'elhaross@macfaq.com' }
    ]   
 }

js代码：

Ext.onReady(function() {
        /**  
        * 同步ajax调用 返回json Object  
        *   
        * @param {}  
        *            urlStr  
        * @param {}  
        *            paramsStr 为字符串键值对形式"key=value&key2=value2"  
        * @return {} 返回json Object  
        */
        function ajaxSyncCall(urlStr) {

            var obj;
            var result;
            //For IE
            if (window.ActiveXObject) {
                obj = new ActiveXObject('Microsoft.XMLHTTP');
            }
            //For Not IE
            else if (window.XMLHttpRequest) {
                obj = new XMLHttpRequest();
            }
            obj.onreadystatechange = function() {

                if (obj.readyState == 4 && obj.status == 200) {
                    result = obj.responseText;

                }
            }
            //param:Type:'get/post';URL;sync(是否异步传输)
            obj.open('GET', urlStr, false);
            //obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');   
            obj.send(null);

            return result;
        }
        var sm = new Ext.grid.CheckboxSelectionModel();
        var rn = new Ext.grid.RowNumberer()
        var proj = {
            header: "pro",
            //renderTo:"hello",
            dataIndex: "pro",
            editor: { xtype: 'textfield',
                allowBlank: false
            }
        };
        //返回model和store的fields字段值
        function getFields() {
            var col = "[rn,sm,";
            var stor_str = "[";
            var result = "";
            var json = Ext.util.JSON.decode(ajaxSyncCall("creatcol.json?id=" + Math.random()));
            //遍历外层对象
            for (data in json) {
                //第二层循环,遍历数组
                for (dt1 in json[data]) {
                    //第三层循环，遍历hash数据
                    for (dt2 in json[data][dt1]) {
                        //将header和dataIndex的值一hash格式传到数组中，在声明columnModel时用
                        //var temp = {};
                        col += "{header:" + "'" + dt2 + "',";
                        col += "dataIndex:" + "'" + dt2 + "',";
                        //col += sm+"'"+dt2+"',";
                        //col +=new Ext.grid.RowNumberer()+"'"+dt2+"',";
                        col += "editor:{ xtype:'textfield',allowBlank: false}},";
                        stor_str += "{name:" + "'" + dt2 + "'},";
                    }
                    col = col.substring(0, col.lastIndexOf(","));
                    stor_str = stor_str.substring(0, stor_str.lastIndexOf(","));
                    col += "]";
                    stor_str += "]";
                    result = col + "$" + stor_str;
                    return result;
                }






            }
        }

        var result = getFields(); alert(result);
        var index = result.indexOf("$");
        var columnModel = result.substring(0, index);
        var storeStr = result.substring(index + 1);
        // var sm = new Ext.grid.CheckboxSelectionModel();
        var cm = new Ext.grid.ColumnModel(
        //new Ext.grid.RowNumberer(),
        //sm,
     eval(columnModel)

    );
        cm.defaultSortable = true;
        // ArrayReader
        var store = new Ext.data.Store({
            root: 'coders',
            //remoteSort: true,
            proxy: new Ext.data.HttpProxy({
                url: 'creatcol.json?id=' + Math.random(),
                method: 'GET'
            }),
            reader: new Ext.data.JsonReader({
                idProperty: 'threadid',
                root: 'coders'
            }, eval(storeStr))
        });
        store.load({ params: { start: 0, limit: 5} });

        var tbar = [
                    new Ext.Toolbar.TextItem('Tools bar:'),
                { xtype: "tbfill" }, {
                    pressed: true,
                    text: "Refresh",
                    handler: function() {
                        Ext.Msg.alert("Refresh", "Refresh!")
                    }
                }, {
                    xtype: "tbfill"
                }, {
                    pressed: true,
                    text: "Selection"
                }, {
                    xtype: "tbseparator"
                }, {

                    pressed: true,
                    text: "Add",
                    handler: function() { Ext.Msg.alert("Add", "add infro!") }
                }, {
                    xtype: "tbseparator"
                }, {
                    pressed: true,
                    text: "save",
                    handler: function() {
                        Ext.Msg.alert("Save", "save infro successed!!!")
                    }
                }, {
                    xtype: "tbseparator"
                }
                 ];
        var grid = new Ext.grid.EditorGridPanel({
            draggable: true,
            store: store,
            cm: cm,
            el: grid,
            renderTo: 'w',
            width: 630,
            height: 320,
            loadMask: true,
            //tbar:tbar,
            tools: [{ id: "save" }, {
                id: "help",
                handler: function() { Ext.Msg.alert("Help", "Need help!") }
            }, {
                id: "close",
                handler: function() { grid.hide(); }
}],
                bbar: [
                    new Ext.PagingToolbar({
                        store: store,
                        pageSize: 5,
                        displayInfo: true,
                        displayMsg: "Displaying {0} - {1} of {2}",
                        emptyMsg: "No data to display",
                        items: ['-', {
                            pressed: true,
                            enableToggle: true,
                            text: 'show preview',
                            cls: 'x-btn-text-icon details',
                            toggleHandler: function(btn, pressed) {
                                var view = grid.getView();
                                view.showPreview = pressed;
                                view.refresh();
                            }
}]
                        })
             ],
                collapsible: true,
                multiSelect: true,
                title: 'Edit Plants',
                frame: true,
                clicksToEdit: 2,
                trackMouseOver: true,
                // viewConfig: {
                stripeRows: true,
                enableTextSelection: true
                //}

            });
            grid.render();


        });