1. #1
    Ext User
    Join Date
    Jun 2010
    Location
    china
    Posts
    2
    Vote Rating
    0
    zhangyonghui is on a distinguished road

      0  

    Default how to display the data in the gridPanel?

    how to display the data in the gridPanel?


    I use the gridPanel to display the data dynamically,but the data can not display.I don't kown why!So,please help me.
    There are my code.
    Code:
    Ext.namespace("com.branchitech.taskmanager");
    
    /**
     *    通过标签查找的数据的显示界面
     */
    com.branchitech.taskmanager.DatasByTagsDisplay = function(config){
        config = config || {};
        config = this._initConfig(config);
        com.branchitech.taskmanager.DatasByTagsDisplay.superclass.constructor.call(this,config);
    };
    
    Ext.extend(com.branchitech.taskmanager.DatasByTagsDisplay,Ext.grid.GridPanel,{
        //初始化配置
        _initConfig : function(config){
            var defaultConfig = this._initDefaultConfig();
            Ext.applyIf(config,defaultConfig);//复制默认配置到初始化配置中
            return config;
        },
        
        //初始化默认配置
        _initDefaultConfig : function(){
            var sm = this._initSm();
            var store = this._initStore();
            var columns = this._initColumns();
            var buttons = this._initButtons();
            var pageBar = this._initPageBar(store);
            var defaultConfig = {
                id : "DATAS-PANEL",//id名
                viewConfig : {     //视图配置
                    forceFit: true,
                    deferEmptyText: true, 
                    emptyText : "<font color = 'red'>没有相应数据</font>"
                },
                autoScroll : true,//下拉条
                autoSizeColumns : true,//自动调节列宽
                autoHeight : true,//自动调节高度
                //height : 400,
                //autoExpandColumn : "data",
                sm : sm,
                store : store,
                cm : columns,
                tbar : buttons,
                bbar : pageBar
            };
            return defaultConfig;
        },
        
        //初始化sm
        _initSm : function(){
            var sm = new Ext.grid.RowSelectionModel({
                singleSelect : true
            });
            return     sm;
        },
        
        //初始化store
        _initStore : function(){
            return com.branchitech.taskmanager.dataStore;
        },
        
        //初始化column
        _initColumns : function(){
            var columns = new Ext.grid.ColumnModel([
                {header: "数据标题", width: 200, sortable: true, dataIndex: 'title'},
                {header: "数据描述", width: 400, sortable: true, renderer: this.formatDescription, dataIndex: 'description'},
                {header: "数据来源系统", width: 200, sortable: true, dataIndex: 'source'}
                //{header: "操作标签", width: 200, sortable: true}
            ]);
            return columns;
        },
        
        //初始化工具条上的按钮
        _initButtons : function(){
            var buttons = [];
            var button1 = new Ext.Button({
                text : "button1"
            }); 
            buttons.push(button1);
            return buttons;
        },
        //初始化分页工具条
        _initPageBar : function(store){
            var pageBar = new Ext.PagingToolbar({
                    store : store,
                        pageSize : 6,
                        displayInfo : true,
                        displayMsg : "显示从{0}条数据到{1}条数据,共{2}条数据",
                        emptyMsg : "没有记录"
             })
             return pageBar;
        },
        
        //格式化数据的描述信息,只显示50个长度的字符
        formatDescription : function(description){
            alert(description);
        }
    });
    
    com.branchitech.taskmanager.dataRecord = Ext.data.Record.create([
        {
            name : 'title',
            type : "String"
        },
        {
            name : 'description',
            type : "String"
        },
        {
            name : 'source',
            type : "String"
        }
    ]);
    
    com.branchitech.taskmanager.dataStore = new Ext.data.JsonStore({
        autoLoad : true,
        proxy : new Ext.data.HttpProxy(
            {
                url : "../test/json/datas.json"
            }
        ),
        reader: new Ext.data.JsonReader(
            {
                'totalProperty': "results",
                  root: "rows"
            }, 
            com.branchitech.taskmanager.dataRecord
        )
    });
    the datas.json is:
    Code:
    {
        'results' : 2,
        'rows' : [
            {'title': '新建会议','description': '新建一个会议','source' : '日常工作管理'},
            {'title': '新建项目','description': '新建一个项目','source' : '日常工作管理'}
        ]
    }
    Last edited by Condor; 4 Aug 2010 at 11:43 PM. Reason: Please post using [CODE] tags!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. type:'String' is not a valid type. You want type:'string' (small s).
    2. JsonStore doesn't have a reader config option. You want a normal Ext.data.Store.

  3. #3
    Ext User
    Join Date
    Jun 2010
    Location
    china
    Posts
    2
    Vote Rating
    0
    zhangyonghui is on a distinguished road

      0  

    Default Thanks for you

    Thanks for you


    Yes,you are right. The Ext.data.JsonStore does not have a reader config option and a proxy config option.The reader config option is instead of "totalProperty"、"root"、"fields" config option,and the url option is instead of the proxy config option.So there are the correct code.See below.
    Ext.namespace("com.branchitech.taskmanager");
    /**
    * 通过标签查找的数据的显示界面
    */
    com.branchitech.taskmanager.DatasByTagsDisplay = function(config){
    config = config || {};
    config = this._initConfig(config);
    com.branchitech.taskmanager.DatasByTagsDisplay.superclass.constructor.call(this,config);
    };
    Ext.extend(com.branchitech.taskmanager.DatasByTagsDisplay,Ext.grid.GridPanel,{
    //初始化配置
    _initConfig : function(config){
    var defaultConfig = this._initDefaultConfig();
    Ext.applyIf(config,defaultConfig);//复制默认配置到初始化配置中
    return config;
    },

    //初始化默认配置
    _initDefaultConfig : function(){
    var sm = this._initSm();
    var store = this._initStore();
    var columns = this._initColumns();
    var buttons = this._initButtons();
    var pageBar = this._initPageBar(store);
    var defaultConfig = {
    id : "DATAS-PANEL",//id名
    el : "dataList",
    viewConfig : { //视图配置
    forceFit: true,
    deferEmptyText: true,
    emptyText : "<font color = 'red'>没有相应数据</font>"
    },
    autoScroll : true,//下拉条
    autoSizeColumns : true,//自动调节列宽
    autoHeight : true,//自动调节高度
    //height : 400,
    sm : sm,
    store : store,
    cm : columns,
    tbar : buttons,
    bbar : pageBar
    };
    return defaultConfig;
    },

    //初始化sm
    _initSm : function(){
    var sm = new Ext.grid.RowSelectionModel({
    singleSelect : true
    });
    return sm;
    },

    //初始化store
    _initStore : function(){
    return com.branchitech.taskmanager.dataStore;
    },

    //初始化column
    _initColumns : function(){
    var columns = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {header: "数据标题",sortable: true, dataIndex: 'title'},
    {header: "数据描述",sortable: true, renderer: this.formatDescription, dataIndex: 'description'},
    {header: "数据来源系统", sortable: true, dataIndex: 'source'}
    //{header: "操作标签", width: 200, sortable: true}
    ]);
    return columns;
    },

    //初始化工具条上的按钮
    _initButtons : function(){
    var buttons = [];
    var button1 = new Ext.Button({
    text : "button1"
    });
    buttons.push(button1);
    return buttons;
    },

    //初始化分页工具条
    _initPageBar : function(store){
    var pageBar = new Ext.PagingToolbar({
    store : store,
    pageSize : 6,
    displayInfo : true,
    displayMsg : "显示从{0}条数据到{1}条数据,共{1}条数据",
    emptyMsg : "没有记录"
    })
    return pageBar;
    },

    //格式化数据的描述信息,只显示50个长度的字符
    formatDescription : function(description){
    description = description.substr(0,50);
    //description = description.substring() + "...";
    if(description.length >= 50){
    description = description + "..."
    }
    return description;
    }
    });
    com.branchitech.taskmanager.dataStore = new Ext.data.JsonStore({
    autoLoad : true,
    url : "../test/json/datas.json",
    //'totalProperty': "results",
    root: "rows",
    fields : [
    {
    name : "title",
    type : "string"
    },
    {
    name : "description",
    type : "string"
    },
    {
    name : "source",
    type : "string"
    }
    ]
    });

Similar Threads

  1. Unable to display data in GridPanel
    By chessman in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 31 Jan 2010, 6:26 PM
  2. GridPanel does not display data?
    By quyenpn in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 4 Nov 2008, 12:56 AM
  3. GridPanel to display a paragraph wise data
    By arunpjohny in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 1 Oct 2008, 10:46 PM
  4. My GridPanel is not display JSON Data. Help?
    By ClemsonJeeper in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 10 Mar 2008, 2:55 AM
  5. SOS!why the data in gridpanel can't display
    By sdjnzlb in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 13 Dec 2007, 11:48 PM

Thread Participants: 1