1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default Create store/model fields from server response

    Create store/model fields from server response


    <EDIT> Found a workaround in 3rd post of this thread.


    I have been playing around with the Radar Chart example. It's very easy to setup with static data, but was looking for the best way to create the fields based on the query sent to the server. From what I can tell, you must have your yField the same as the field name in order to show the data. How can I make dynamic fields in the model OR make the yField label dynamic based on the data returned from the server? Here is the example setup I put together

    Code:
    var chs = Ext.create('Ext.data.Store', {
    	fields : [], //THIS IS EMPTY AT START. NEED TO POPULATE FROM SERVER        
            //fields : ['name', 'www.domain1.com', 'www.domain2.com', 'www.domain3.com'],
    	proxy        : {
            type    : 'ajax',
            url     : '/research/radarchart/poll/',
            reader: {
                type : 'json',
                root : 'data'
            }
        },
        autoLoad: true,
        listeners: {
            beforeload: function(store, operation) {
        		//TODO: Should I be populating store fields here? If so, how?
        	},
        	load: function(store, records, success) {
        		//TODO: Create dynamic fields based on JSON response
        		for(var i = 0; i < store.data.items.length; i++) {
        			var raw = store.data.items[i].raw;
        		}
        		console.log(success);
        	}
        }

    Here is the legend values for the radar:

    Code:
    series: [{
                    	showInLegend	: true,
                        type			: "radar",
                        xField			: "name",
                        yField			: "www.domain1.com", //ERROR IF NOT THE SAME AS FIELD PROPERTY NAME
                        style: {
                            opacity: 0.4
                        }
                    },{
                        showInLegend: true,
                        type: 'radar',
                        xField: 'name',
                        yField: 'www.domain2.com', //ERROR IF NOT THE SAME AS FIELD PROPERTY NAME
                        style: {
                            opacity: 0.4
                        }
                    },{
                        showInLegend: true,
                        type: 'radar',
                        xField: 'name',
                        yField: 'www.domain3.com', //ERROR IF NOT THE SAME AS FIELD PROPERTY NAME
                        style: {
                            opacity: 0.4
                        }
                    }]

    And a sample response from the server could be:

    Code:
    {
       "data":[
          {
             "name":"Value 1",
             "www.domain1.com":"6.144168442554701",
             "www.domain2.com":"5.293469638023101",
             "www.domain3.com":"5.209589306076926"
          },
          {
             "name":"Value 2",
             "www.domain1.com":"41.24804810094388",
             "www.domain2.com":"41.24804810094388",
             "www.domain3.com":"18.42372235865956"
          },
          {
             "name":"Value 3",
             "www.domain1.com":"60507",
             "www.domain2.com":"13773",
             "www.domain3.com":"1299"
          },
          {
             "name":"Value 4",
             "www.domain1.com":"63394",
             "www.domain2.com":"13923",
             "www.domain3.com":"2198"
          },
          {
             "name":"Value 5",
             "www.domain1.com":"6.35595229012",
             "www.domain2.com":"5.187916082251003",
             "www.domain3.com":"5.862366343060308"
          },
          {
             "name":"Value 6",
             "www.domain1.com":"82.29572936219174",
             "www.domain2.com":"55.32603085531591",
             "www.domain3.com":"30.61729927619892"
          }
       ]
    }
    So the above format works when I hard code in the fields in the store as name, domain1.com, etc...But I would like to populate the fields from the metadata that comes back from the server. What is the best method to approach this? When I breakpoint on the store load listener, I don't see a fields property that I can just modify, plus that doesn't seem like the most elegant way.

    I would also need to obviously repopulate the yField in the legend with all metadata labels except the name property.

    Suggestions on the best method to use is very much appreciated.

  2. #2
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    I notice in the documents here it says:

    http://dev.sencha.com/deploy/ext-4.0...ata.Field.html

    Fields are used to define what a Model is. They aren't instantiated directly - instead, Ext.regModel creates a Field instance for each field configured in a Model. For example, we might set up a model like this:
    Still can't find a way to load fields after a response. The only reason I am doing this is the way is the Radar chart yField must be the same as the field name, otherwise it won't display data. Is there a way to set the Legend names separate from what you identify in the fields property for the Model?

    Code:
    //create radar dataset model.
    Ext.regModel('Radar', { 
    	fields: ['name', 'site0', 'site1', 'site2'],
        proxy: {
    		type    : 'ajax',
    	    url     : '/research/radarchart/poll/',
    	    reader: {
    	        type : 'json',
    	        root : 'data'
    	    }
        }
    });
    
    
    var chs = Ext.create('Ext.data.Store', {
    	model: 'Radar',
        autoLoad: true,
        listeners: {
        	beforeload: function(store, operation) {
        		//TODO: Should I be populating store fields here?
    	    	for(var i = 0; i < store.data.items.length; i++) {
    				var raw = store.data.items[i].raw;
    			}
        	},
        	load: function(store, records, success) {
        		//TODO: Create dynamic fields based on JSON response
        		for(var i = 0; i < store.data.items.length; i++) {
        			var raw = store.data.items[i].raw;
        			//store.model.set('name', raw.name);
        		}
        		console.log(success);
        	}
        }
    
    ...
    ...
    ...
    ...
    ...
    axes: [{
                        type: "Radial",
                        position: "radial",
                        label: {
                            font: "11px Arial",
                            display	: true
                        }
                    }],
                    series: [{
                    	showInLegend	: true,
                        type			: "radar",
                        xField			: "name",
                        yField			: "site0", //ERROR IF NOT THE SAME AS FIELD PROPERTY NAME
                        style: {
                            opacity: 0.4
                        }
                    },{
                        showInLegend: true,
                        type: 'radar',
                        xField: 'name',
                        yField: 'site1', //ERROR IF NOT THE SAME AS FIELD PROPERTY NAME
                        style: {
                            opacity: 0.4
                        }
                    },{
                        showInLegend: true,
                        type: 'radar',
                        xField: 'name',
                        yField: 'site2', //ERROR IF NOT THE SAME AS FIELD PROPERTY NAME
                        style: {
                            opacity: 0.4
                        }
                    }]

  3. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    260
    Vote Rating
    4
    hallikpapa is on a distinguished road

      0  

    Default


    I returned another field in each Model instance called label0, label1, label2.

    This works, but is very sloppy. Any ideas on something more elegant?

    Code:
    var chs = Ext.create('Ext.data.Store', {
    	model: 'Radar',
        autoLoad: true,
        listeners: {
        	load: function(store, records, success) {
        		//FIXME: This is very sloppy
    		var proxy = this.model.getProxy(); 
        		var chart = Ext.getCmp("radar-test");
        		var series = chart.items.items[0].series;
        		for(var i = 0; i < series.items.length; i++)
        		{
        			var legendItem = series.items[i];
        			var titleIndex = "label" + i;
        			var labels = proxy.reader.rawData.label;
        			var title = labels[titleIndex];
        			legendItem.setTitle(title);
        		}
        	}
        }
    });

Similar Threads

  1. Response from store / model after sync?
    By ngardner in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 25 Jul 2013, 7:32 AM
  2. Response from server when "create" failed
    By ssamayoa in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 9 Dec 2010, 4:46 PM
  3. How to change format of value in Store or Model or Fields?
    By tomalex0 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 13 Nov 2010, 4:42 AM
  4. dataStore response after sending to server (store.save)
    By stefanosandes in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 1 Oct 2010, 8:35 AM
  5. Is there a way to get the response from server when action failed with Store
    By craneleeon in forum Ext 1.x: Help & Discussion
    Replies: 10
    Last Post: 8 Oct 2007, 10:58 AM