Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: nested data in grid

  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'}, 
        ]
    });

  8. #7
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    48

    Default thanx vietits^^

    in advance
    i have to use 'success'.
    so
    i use "belongTo".

    because i will make if 'success'=='true' then i make this grid view displayed.

    if delete belongTo, is it ok to use data of 'success'?

    please answer to me.

  9. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    When do store loading, you set "success" to true to tell the store that the loading is succesful and then store will contain loaded data. Also, you can listen for store 'load' event and check the successful argument.

  10. #9
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    48

    Default thanx



    but 'success' has two options 'true' or 'false'.

    when server sends me the value of 'success', i have decide to 'show grid' or not according to value of 'success'.

    so i have to know value of 'success'.

    do you have any idea?

  11. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    If you listen for store 'load' event, the successful argument will tell you that thing. If success set to true, your store will loaded data, if not, your store will contains old data.

    See more store load event here: http://docs.sencha.com/ext-js/4-1/#!...ore-event-load

Page 1 of 2 12 LastLast

Posting Permissions

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