1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    1
    halfstep is on a distinguished road

      0  

    Default Unanswered: Loading multiple DataGrids from one Json Request

    Unanswered: Loading multiple DataGrids from one Json Request


    I've been trying to get this to work for 2 or 3 days now, and it's starting to get a bit frustrating. Please any help would be awesome!


    I'm trying to create a tabbed panel where each panel houses a different DataGrid. Each DataGrid is a domain item (Car, Wheel, Store for example). I'm trying to complete this all in 1 request.


    So basically what I'm doing is Creating a super Store that houses the main data, then each DataGrid has its own Store that is used by the Grid to display the data. I thought I had it working, but the problem is that I'm trying to get this to work with a Dynamic Model. I don't want to have to hard code the model.


    Here is my json response:
    Code:
    {
      "response":[
      {    
        "domains":[     
          {"name":"Car", 
           "id":0, 
           "properties":[            
              {"name":"Name", "dataType":"string", "property":"name"},             
              {"name":"Type", "dataType":"string", "property":"type"},             
              {"name":"Long Name", "dataType":"string", "property":"longName"},             
              {"name":"QoH", "dataType":"int", "property":"qoh"}         
           ],         
           "datas":[
              {"name":"Prius",   "type":"Car", "longName":"Hybrid Prius",  "qoh":5},            
               {"name":"Accord", "type":"Car", "longName":"4 Door Accord", "qoh":7},            
               {"name":"Escort", "type":"Car", "longName":"Family Car",    "qoh":9},            
               {"name":"WRX",    "type":"Car", "longName":"Fast Car",      "qoh":1}         
           ]
          },      
          {"name":"Factory",         
           "id":1,         
           "properties":[            
              {"name":"Name", "dataType":"string", "property":"name"},             
              {"name":"Type", "dataType":"string", "property":"type"},             
              {"name":"Long Name", "dataType":"string", "property":"longName"},             
              {"name":"QoH", "dataType":"int", "property":"qoh"}          
            ],         
            "datas":[            
              {"name":"Toyota", "type":"Factory", "longName":"East Coast Factory", "qoh":5},            
              {"name":"Suburu", "type":"Factory", "longName":"Luxury Factory",     "qoh":7},           
              {"name":"Ford",   "type":"Factory", "longName":"American Built",     "qoh":9},                
            ]      
          }
        ] 
      }
      ] 
    }
    I created a Model Object because I was having problems getting it to work using the Fields to set up the store:
    Code:
    Ext.define('DataGrid.model.ResponseModel', {
        extend: 'Ext.data.Model',
        hasMany:{model:'DataGrid.model.DomainItem', name:'domains'}
    });
    
    
    Ext.define('DataGrid.model.DomainItem', {
        extend: 'Ext.data.Model',
      fields:['name', 'id'],
        belongsTo: 'DataGrid.model.ResponseModel',
      hasMany:[
        {model:'DataGrid.model.Property', name:'properties'},
        {model:'DataGrid.model.Data', name:'datas'}
      ]  
    });
    
    
    Ext.define('DataGrid.model.Property', {
        extend: 'Ext.data.Model',
      fields:['name', 'dataType', 'property'],
        belongsTo: 'DataGrid.model.DomainItem'
    });
    
    
    Ext.define('DataGrid.model.Data', {
        extend: 'Ext.data.Model',
      fields:['name', 'type'],
        belongsTo: 'DataGrid.model.DomainItem'
    });

    I'm able to get the grid to display, but unless I manually add the fields in the DataGrid.model.Data, they don't get populated. I know this has something to do with the initialization of the store. I'm guessing it only populates specified data fields from the JSON. I've been trying to see if there's some way I can define all this stuff when my proxy gets the response back, but am coming up with blanks.
    Code:
    Ext.define('DataGrid.store.ResponseStore', {
        extend: 'Ext.data.Store',
      model: 'DataGrid.model.ResponseModel',
        proxy: {
            type: 'ajax',
        model: 'DataGrid.model.ResponseModel',
            url: '/msee/dataGrid/getDummyData.exec',
            reader: {
                type: 'json',
          root: 'response',     
            }
        },
      autoLoad: true,
      listeners: {
        load: function(store, records, successful) {     
          store.each(function(rec){
            var domains = rec.getAssociatedData().domains;
            domains.forEach(function(domain){         
              var properties = domain.properties;
              var domainName = domain.name;
              var fieldset = new Array();
              var gridFields = new Array();
              properties.forEach(function(property){
                fieldset.push({name: property.property, type: property.dataType, mapping:property.property});
                gridFields.push({dataIndex: property.property, header: property.name});
                DataGrid.model.Data.prototype.fields.add(new Ext.data.Field({ name: property.property, type: property.dataType}));
              });                  
              // Create model
              Ext.define('Domain_' + domainName, {
                extend: 'Ext.data.Model',
                fields: fieldset
              });
              
              // Create store
              var store = new Ext.data.JsonStore({
                storeId: 'storeModel_' + domainName + '_id',
                autoLoad: false,
                model: 'Domain_' + domainName                                                   
              });
              
              var datas = domain.datas;
                datas.forEach(function(d){            
                store.add(d);  
                //alert('name: ' + d.name + ' - type: ' + d.type + ' - qoh: ' + d.qoh);            
              });
              var dataGrid = drawTab(store, gridFields, domainName);
                dataGrid.getStore().each(function(rec){
              });
            });
          });
        }    
      }
    });

    How would you dynamically define all this? It feels like everything is really catered to statically defining the models/fields. I need some way for this complicated response to be able to parse it and generate the proper models on the fly. Is this possible?

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    86
    Answers
    31
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      1  

    Default


    It's not really "catered" to statically defining models and fields...that's just one approach. You can pretty easily define model configs from metaData returned in your AJAX response: http://docs.sencha.com/extjs/4.2.1/#...perty-metaData

    In addition to the defining the fields to be used by the Reader, you can also pass back other custom configuration data (column configs for your grid, for example).

    Here's an example:

    Before pasting your code, see if you can make a working example using Sencha Fiddle: https://fiddle.sencha.com/

    Not only will it let everyone see what you're talking about with their own eyes, but it also makes debugging your issue 19 billion times easier

    Embedding your newly created Fiddle is super-easy: Using Sencha Fiddle in the Forums

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    1
    halfstep is on a distinguished road

      1  

    Default


    Thanks for the answer existdissolve.

    I was afraid someone was going to say I was going about things wrong. I've remapped my data a bit to handle the change in format you're proposing by hard-wiring the columns into the JSON response. But it's still not writing the grid, I'm afraid I'm doing something a bit wrong.

    Code:
    {
    	"metaData": {
    		"root": "data",
    		"fields": ["name", "type", "longName", "qoh", "os"],
    		"colModel": [
          {"dataIndex": "name", "header": "Name"},
          {"dataIndex": "type", "header": "Type"},
          {"dataIndex": "company", "header": "Company"},
          {"dataIndex": "qoh", "header": "Quality"}
        ]
    	},
    	"data": [
        {"name": "Accord",  "type": "Car", "company": "Honda",  "qoh": 5},
        {"name": "WRX",     "type": "Car", "company": "Subaru", "qoh": 7},
        {"name": "Impalla", "type": "Car", "company": "Chevy",  "qoh": 9}
      ]
    }
    Here's the code initialization
    Code:
    function initializeApplication() {
    	var store = createStore('System');
    	var dataGrid = createDataGrid('System', store);
    	var panel = Ext.getCmp('gridPanelId');
    	panel.add(dataGrid);
    }
    
    
    function createDataGrid(domain, store){
    	var dataGrid = 
    		Ext.create('Ext.grid.Panel', {
    		    id: 'widget.dataGrid.' + domain,
    		    title: domain,
    		    columns: [],
    		    store: store
    		});
    	return dataGrid;	
    }
    
    
    function createStore(domain){
    	var store = 
    		Ext.create('Ext.data.Store', {
    	        autoLoad: true,
    	        proxy: {
    	            type: 'ajax',
    	            url: '/msee/dataGrid/getDummyData.exec',
    	            reader: {
    	                type: 'json',
    	                root: 'data'
    	            }
    	        },
    	        fields: [],
    	        listeners: {
    	            metachange: function(store, meta) {
                    alert(meta.colModel); 
    	              me.reconfigure(null, meta.colModel);
    	            }
    	        }          
    	    });
    	return store;
    }
    .

    I'm getting a blank grid with no column data. I put a break point inside the metachange listener and I can see that the meta.colGroup is populated with the columns from the JSON. Is there something you can see that I'm doing wrong?

Thread Participants: 1