日期:2014-05-16  浏览次数:20369 次

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;