title: Multiple Stores Loading Issue Sencha Touch
body: <p>I have two Stores 'Polls' and 'Choices' with respective models as 'Poll' and 'Choice'</p>
  
  <p><strong>models</strong></p>
  
  <p><em>Poll</em></p>
  
  <pre><code>Ext.define('PollsTest.model.Poll', {
  extend: 'Ext.data.Model',
  xtype : 'poll', 
  
  config: {
      fields: [
          { name: 'title'},
          { name: 'uri' },
  
  
      ],
  
      hasMany :
              [
                  {
                      model : 'PollsTest.model.Choices',
                      name : 'Choices',
                      primaryKey : 'title',
                      foreignKey : 'title',
                      foreignStore : 'Choices'
                  }
              ]
  
  }
  
  
  });
  </code></pre>
  
  <p><em>Choice</em></p>
  
  <pre><code>Ext.define('PollsTest.model.Choice', {
  extend: 'Ext.data.Model',
  
  
  
  
  config: {
      fields: [
          { name: 'choice', type: 'auto' },
          { name: 'votes', type: 'auto' },
          {name : 'title', type: 'auto'},
          {name : 'uri', type : 'auto'}
  
      ],
  
  
  belongsTo : {
                  model : 'PollsTest.model.Choices',
                      name : 'Choices',
                      primaryKey : 'title',
                      foreignKey : 'title',
                      foreignStore : 'Choices',
                      getterName: 'getChoices',
                      setterName: 'setChoices'
  
              }        
  }
  
  
  
  });
  </code></pre>
  
  <p><strong>Stores</strong></p>
  
  <p><strong>Polls</strong></p>
  
  <pre><code>Ext.define('PollsTest.store.Polls',{
  
  extend : 'Ext.data.Store',
  alias : 'store.pollStore',
  //xtype:'pollStore',        
  
  requires : 
              [
                  'PollsTest.model.Poll',
                  'Ext.data.proxy.JsonP',
                  'Ext.data.reader.Json'
  
              ],
  
  
  config :
          {   
              autoLoad : true,
              model : 'PollsTest.model.Poll',
              storeId :'pollStore',
  
  
  
  
              listeners : 
                      {
                          load : function(store, records)
                              {
                                  console.log('store loaded',records);
                              }
                      },
  
  
              //storeId : 'pollstore',
              proxy : 
                  {
                      type : 'jsonp',
                      url : 'http://localhost/polls',
                      reader : 
                          {
                              type : 'json',
                              rootProperty : 'polls'
                          }
                  }
          },
  
  
  
  });
  </code></pre>
  
  <p><strong>Choices</strong></p>
  
  <pre><code>Ext.define('PollsTest.store.Choices',{
  
  extend : 'Ext.data.Store',
  alias : 'store.choiceStore',        
  
  requires : 
              [
                  'PollsTest.model.Choice'
              ],
  
  
  config :
          {   
              autoLoad : false,
              model : 'PollsTest.model.Choice',
              storeId :'choiceStore',
  
              listeners : 
                  {
                      load : function(store, records)
                              {
                                  console.log('choice store loaded',records);
                              }
  
                  },
  
  
              proxy :
                  {
                      type : 'jsonp',
                      url : '',
  
                      reader : 
                          {
                              type: 'json',
                              rootProperty : 'choices'
                          }
  
                  }
  
  
          },
  
  
  
  
  });
  </code></pre>
  
  <p>So from <em>Polls</em> store I can populate my List and upon clicking the list item the controller pushes the detail panel to the view. The <strong>Choices Store</strong> will populate based on the tap event occurred on the list. So the problem is I have to push the details panel to the view <strong>only after loading the Choices Store</strong>  </p>
  
  <p>How can I do that?? Suggestions are appreciated. </p>
  
  <p>and My controller will look like this</p>
  
  <pre><code>Ext.define('PollsTest.controller.MainController', {
  extend: 'Ext.app.Controller',
  
  
  requires : ['PollsTest.controller.ChoiceController'],
  
  config: {
  
  
  
  
  
      refs: {
          mainController : 'mainpanel',
          controller_list : 'pollslist',
          details_controller : 'pollsdetails'
      },
      control: {
  
          controller_list : 
                      {
                          itemtap : 'ShowPoll'
                      },
  
  
  
              }
  
              },
  
  ShowPoll : function (list, index, target, record, e, eOpts)
                  {   
                     var tochoice = record.data.uri;
  
                     var main_path = 'http://localhost';
                     var choices_url = main_path+tochoice;
  
                     var choice_store_object = Ext.getStore('choiceStore');
                     choice_store_object.getProxy().setUrl(choices_url);
                     choice_store_object.load();
  
                     console.log(choice_store_object.getCount());
  
                  /*   var choices_store_object = Ext.create('PollsTest.store.Choices');
  
                     var checking = choices_store_object.on('load',function(){return true;});
  
                     if(checking==true) --&gt; didn't work no detail panel pushing is happening but the order of loading the stores works fine here. 
                          {
                   */     console.log('before pushing');
                          this.getMainController().push({xtype : 'pollsdetails',data : record.data });
                          console.log('after Pushing');
  
                   //       }
  
  
  
  
  
  
  
  
  
  
  
  
                  //this.getApplication().getController('ChoiceController').onDetailsShow(this,record,tochoice);   
  
  
  
  
  
  
                  }
  
  
  
  
  
  
  
  
   });
  </code></pre>