Basic model -> store -> fieldset setup question

[andy370]

I've searched the documentation for hours now and can't find an example of a Store with a Model and data that hooks up to a fieldset xtype to display the Store's data in textfield and textareafield xtypes in the fieldset.

Here's my example setup
Model:

Ext.define('GS.model.HomeItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['results']
    }
});

Store:

Ext.define('GS.store.Home', {
   extend   : 'Ext.data.Store',
   config   : {
        model   : 'GS.model.HomeItem',
        proxy   : {
           type : 'jsonp',
           url  : 'https://localhost:8443/...', /*returns: {"results":[[301.27]]}*/
           reader   : {
               type : 'json',
               rootProperty : ''
           }
       },
       autoLoad : true
   }
});

View:

Ext.define('GS.view.Home', {
    extend      : 'Ext.Panel',
    xtype       : 'homepanel',
    scrollable  : true,
    config      : {
        title     : 'Home',
        styleHtmlContent : true,
        items     : [
          {
            xtype   : 'panel',
            html    :  '<h2>Welcome</h2>'
          },
          {
            xtype           : 'fieldset',
            title           : 'Today\'s Summary',
            store           : 'Home',
            items           : [
                {
                    xtype   : 'textfield',
                    label   : 'Sales',
                     name    : 'results'
                }
...

This currently displays the field with no value. How do I fix this? Does someone have a good example since "Using Forms" and "Using Stores" doesn't cover hooking up the two together?

[mitchellsimoens]

If you had a form you could use the setRecord method on the form to load the model data into the fields

[andy370]

That got me started down the right path and I was able to assign a hard-coded value like this:

var homeViewPanel = this.getHome();
var newHomeItem = Ext.create("GS.model.HomeItem", {  results: '101.20'  });
homeViewPanel.down('formpanel').setRecord(newHomeItem);

Now I'm trying to get my data from the store I mentioned earlier like this:

var homeViewPanel = this.getHome();
var homeStore = Ext.getStore('homeStore');
homeViewPanel.down('formpanel').setRecord(homeStore);

But it doesn't load anything on the form. I check the homeStore in the console and it does contain a value for my results field. Could it have to do with how my data is being returned to the store?

Ext.data.JsonP.callback1({"results":[[123.45]]});

[andy370]

When I view my store loaded from JsonP:

console.log(homeStore);

And view it in my console, I can expand it:
> Ext.apply.create.Class
> > data: Ext.apply.create.Class
> > > all: Array[1]
> > > > 0: Ext.apply.create.Class
> > > > > data: Object
> > > > > > id: "ext-record-22"
> > > > > > results: Array[1]
> > > > > > > 0: Array[1]
> > > > > > > > 0: 301.27
> > > > > id: "ext-record-22"
> > > > length: 1
And I would expect to be able to get at least that length of 1 at the end with this:

console.log(homeStore.data.all.length);

But that only returns "0";
I was also hoping to get the first (and only) item in the store using this:

console.log(homeStore.getAt(0));

But that only returns "undefined"

How come I can view things in my store from the console by expanding down to it, but can't access them via script?

[andy370]

Apparently when I log the store object to the console it somehow updates the console when my asynchronous reply comes back. So I can't rely on looking at my store object in the console to know that data should be there.

1. I implemented the solution found here http://www.sencha.com/forum/showthre...a-from-a-store by adding an event handler for the loading of the data.
2. Removed "autoload: true" from the store (I only need the data when the view loads, so I'll handle it here in the init of my view)
3. Fixed my Json response to be better formatted. ( {"results":301.27} instead of {"results":[[301.27]]} )

Ext.define('GS.store.Home', {
   extend   : 'Ext.data.Store',
   config   : {
        model   : 'GS.model.HomeItem',
        proxy   : {
           type : 'jsonp',
           url  : 'https://localhost:8443/...', /*returns: {"results":301.27}*/
           reader   : {
               type : 'json',
               rootProperty : ''
           }
       }
   }
});

loadInitHome: function() {
  var homeViewPanel = this.getHome();
  var homeStore = Ext.getStore('homeStore');
  homeStore.load();
  homeStore.on('load', function(homeStore, records, successful) {
    homeViewPanel.down('formpanel').setRecord(homeStore.getAt(0));
  }, this);
},

Hopefully posting this helps someone else.