title: How to render different view on selecting tabs in ext js4?
body: <p>1)I have a json file which I want to display in view.</p>
  
  <pre><code>{           
      "contents": [
                  {
                      "title":'JWorld',
                      "image":'image/e-learning/elearning.png',
  
                      "subtitle":[
                      {
                          "categories":'Aus',
                      },
                      {
                          "categories":'England',
                      }                
                      ]
                  },
                  {
                      "title":'JIndia',
                      "image":'image/Content/History_of_India.jpg',
                      "subtitle":[
                      {
                          "categories":'History',
                      },
                      {
                          "categories":'India palace',
                      }                
                      ]
                  },
                  {
                      "title":'JMaharastra',
                      "image":'image/Content/Geography.jpg',
                      "subtitle":[
                      {
                          "categories":'History Maharastra',
                      },
                      {
                          "categories":'Maharastra Heros',
                      }                
                      ]
                  }
                ]
  }
  </code></pre>
  
  <p>2)My view file :--</p>
  
  <pre><code>Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
  {
      extend:'Ext.view.View',
      id:'contentcategoriesViewId',
      alias:'widget.ContentcategoriesView',
      store:'kp.DnycontentcategoriesStore',
      config:
      {
          tpl:'&lt;tpl for="0"&gt;'+
                  '&lt;div class="main"&gt;'+
                  '&lt;/br&gt;'+
                  '&lt;b&gt;{title}&lt;/b&gt;&lt;/br&gt;'+
                  '&lt;img src={image} hight="50" width="100"&gt;&lt;/br&gt;'+
                  '&lt;/div&gt;'+
                  '&lt;/tpl&gt;',
          itemSelector:'div.main',
      }
  });// End of class
  </code></pre>
  
  <p>3) i am using tab panel and dynamically adding tabs in it using json file.</p>
  
  <pre><code>Ext.define('Balaee.view.kp.dnycontentcategories.Contentcategories',{
      extend:'Ext.tab.Panel',
      requires:[
                'Balaee.view.kp.dnycontentcategories.ContentcategoriesView','Balaee.view.kp.dnycontentcategories.ContentcategoriesView1'
               ],
      id:'contentcategoriesId',
      alias:'widget.Contentcategories',
      height:500,
      items:[
  
      ],//end of items square
  });// End of login class
  </code></pre>
  
  <p>4) My store file:--</p>
  
  <pre><code>Ext.define('Balaee.store.kp.DnycontentcategoriesStore',{
      extend: 'Ext.data.Store',
      model: 'Balaee.model.kp.DnycontentcategoriesModel',
      autoLoad:true,
  //    filters: [{
  //        property: 'title',
  //    }],
      proxy:
      {
          type:'ajax',
          api:
          {
              read:'data/content.json',
              //create: ,
              //update: ,
              //destroy: ,
          },//End of api 
          reader:
          {
              type:'json',
              root:'contents',
              //successProperty: ,
          }//End of reader
      }//End of proxy
  });//End 
  </code></pre>
  
  <p>5) My Controller file some code
  here I am dynamically adding some tabs from json file.And selecting particular tab I want different particular values from json file. But I get same view of first tab. How can I solve this problem.</p>
  
  <pre><code>init: function(){
      console.log("inside content controller");
      this.control({
          'Contentcategories':
          {
              render:this.renderFunction,
          }
      });//End of control
  },//End of init() function
  renderFunction:function(){
      console.log("Inside render function");
      var tabPanel = Ext.getCmp('contentcategoriesId');       // tabpanel  
      var tabPanelView = Ext.getCmp('contentcategoriesViewId');   // tabpanel view
  
      var storeObject= this.getStore('kp.DnycontentcategoriesStore'); // store
      storeObject.on('load',function(){
          storeObject.each(function(model){
              //tabPanelView.store().filter('title',model.get('title')),
              console.log(model.get('title'));
              console.log(model.get('categories'));
              tabPanel.add({title:model.get('title'),
                              id:model.get('title'),
                              //html:"&lt;image src=model.get('image')&gt;",
                              xtype:'ContentcategoriesView',              
                          }); //End of add function 
          });// End of storeObject function
          tabPanel.setActiveTab(0);
      });
  },// End of render function 
  </code></pre>
  
  <p>please give me some suggestion.</p>