Results 1 to 10 of 16

Thread: nested data in grid

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    48

    Default Answered: nested data in grid

    hello.
    i have problem with my grid.
    my json is nested data.
    i have no idea about displaying this data to my my grid panel
    please help me

    <CODE>:
    my json.

    {
    "success":"true",
    d:[{
    "idx":"1",
    "title":"DMC Name1",
    "state":"0",
    "regdate":"2012.10.10"
    },
    {
    "idx":"2",
    "title":"DMC Name2",
    "state":"0",
    "regdate":"2012.10.10"
    },
    {
    "idx":"3",
    "title":"DMC Name3",
    "state":"0",
    "regdate":"2012.10.10"
    }]
    }

    store
    var project_List = Ext.create('Ext.data.Store', {
    model: 'projectList',
    autoLoad:true,
    proxy:{
    type: 'ajax',
    url:'resource/json/projectlist.json',
    reader:{
    type:'json',
    }
    },
    listeners:{

    load:function(data){
    console.log(data);
    }
    }
    });
    my grid

    var list_Grid = Ext.create('Ext.grid.Panel',{
    store:project_List,
    id:'projectListGrid',
    columns:[
    {
    header:'Title',
    width:100,
    sortable:true,
    dataIndex:'success'
    },
    {
    header:'Regdate',
    sortable:true,
    dataIndex:'regdate'
    },
    {
    header:'Select',
    sortable:true,
    dataIndex:'string',
    text:'select'
    }
    ]

    });

    </CODE>
    i can display 'success' in my grid .

    list_capture.PNG


    my grid show 'true'
    but 'regdata' and other things can't.

    please help me.

  2. If so, I suggest you use Ext.Ajax.request() to load the json data, no need to use a store to load this. On returning of request, you decode the json data, check the "success" property and do the right thing.
    Code:
    Ext.Ajax.request({
       url: 'resource/json/projectlist.json',
       success: function(response){
            var data = Ext.decode(response.responseText);
            if(data.success == 'true'){
                // load data to grid store
                gridStore.loadData(data.d);
            } else {
                // handle the success == 'false'
            }
       },
       failure: function(){
           // handle the failure of request
       }
    });

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    It seems that you don't need to display value of 'success' but the data under 'd'. If so, you should config root for proxy reader.
    Code:
    var project_List = Ext.create('Ext.data.Store', {
        model: 'projectList',
        autoLoad:true,
        proxy:{
            type: 'ajax',
            url:'resource/json/projectlist.json',
            reader:{
                type:'json',
                root: 'd'
            }
        },
        listeners:{
            load:function(data){
                console.log(data);
            }
        }
    });
    P/S: try to put your code inside CODE tag then you will get more opportunity of getting support from community.

  4. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    48

    Default thanx...^^

    list_capture2.PNG

    but my gird show this.
    do you have any idea about this?

    and someday
    i have use 'success'
    because if 'success'==true
    i have to display this grid panel.

    is this may be problem in someday??


    thantyou!

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    1. Make sure you defined all data fields (idx, title, state, regdate) in your projectList model.
    2. Make sure you defined correct dataIndex for columns in grid.

  6. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    48

    Default i check my model, view.

    HTML Code:
    <CODE>
    
    //view
    
    
    var list_Grid = Ext.create('Ext.grid.Panel',{      
      store:project_List,       
      id:'projectListGrid',        
      columns:[{                     
           header:'Title',                    
           flex:2,                 
           sortable:true,             
           dataIndex:'title'                 
    },                 { 
           header:'Regdate',            
           flext:1,              
           sortable:true,             
           dataIndex:'regdate'                 
    },                 {             
            header: "Select",             
            flex:1,              
            width: 150,              
            renderer:  function(value) {                    
          return Ext.String.format('<a href="#">select</a>');                      }                 }]            });
    
    //model
    Ext.define('projectList',{  
             extend:'Ext.data.Model',
            fields:[{name:'success',type:'string'}],
            hasMany:{model:'list',name:'list',associationKey:'idx'},     });
    
    
        Ext.define('list',{
            extend:'Ext.data.Model',
            fields:[ 
                   {name:'idx',type:'string'}, 
                   {name:'title',type:'string'},  
                   {name:'state',type:'string'}, 
                   {name:'regdate',type:'string'}, 
                   ],
            belongTo:'projectList'            });</CODE>
    this is my model and view.
    is there problem??

    thanx.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    With your json data, you only need one model:
    Code:
    Ext.define('projectList',{  
        extend:'Ext.data.Model',
        fields:[ 
           {name:'idx',type:'string'}, 
           {name:'title',type:'string'},  
           {name:'state',type:'string'}, 
           {name:'regdate',type:'string'}, 
        ]
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •