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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar