REQUIRED INFORMATION: -

Sencha Touch version tested:
  • Sencha Touch 2.0 Final
Browser versions tested against:
  • Chrome 11 (Windows 7)
Description:

Problem #: Ext.list – I have 2 lists :
1. The 1st one is displayed inside a panel along with the segmented Button and a toolbar with two buttons.
2. And 2nd on to an overlay, which invokes on tap of a button ‘Navigation’. This list consists of the same component as the point #1.3. There are 2 warnings for each list :- “[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found”“[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found”
HELPFUL INFORMATION Screenshot or Video:See attached
  • Fig: Problem
listpanel.jpg overlay.jpg

The result that was expected:
  • Problem: The list should have been rendered onto both the overlay as well as the panel list.
The result that occurs instead:
  • Problem: The list doesn’t render onto the overlay as well as the panel throwing a warning.
Code: Problem
//My panel to display the 1st list
Code:
{
         xtype: 'panel',
         layout:'hbox',
         id:'listpanel',
         //hidden: true,
         //style: "background-color: red; color: red;",
         //flex:,
         items:
         [
                  {
                          xtype : 'segmentedbutton',
                          defaults:
                          {
                                  flex:1,
                          },
                          height:44,
                          width:250,
                          docked: 'top',
                          items: 
                          [        
                                   {
                                           text: 'Full Charts',
                                           pressed: true,
                                           ui:'dark',
                                   },
                                   {
                                           text: 'Template',
                                   },
                         
                          ],
                         
 
                  },
                  {
                          xtype: 'todolist', // This is where I am calling my list view
                          width:250,
                  },
                  {
                          xtype: 'toolbar',
                          title: '',
                          ui: 'dark',
                          docked: 'bottom',
                          items: 
                          [
                                   {
                                            xtype: 'button',
                                            text:'Activity Log',
                                            //ui: 'action',
                                           //flex:1,
                                           width:100,
                                  },
                                  {
                                           xtype: 'button',
                                           text:'Signatures',
                                           //ui: 'action',
                                           //flex:1,
                                           width:90,
                         
                                   },
                          ]
                 }
         ],
},
 
//code for the overlay list
 
var menuol = Ext.create('Ext.Panel',
{
         requires:['Todo', 'app.model.TodoModel', 'menuList'],
         hideOnMaskTap: true,
         modal: true,
         id:'mainMenu',
        layout: 'fit',
        left: 0,
         //padding: 10,
         //width: 253,
         height: 400,
        //dock: 'left',
         centered: false,
         items: [
                 {
                          xtype : 'segmentedbutton',
                          defaults:
                          {
                                   flex:1,
                          },
                          height:44,
                          width:240,
                          docked: 'top',
                          items: 
                          [        
                                   {
                                            text: 'Full Charts',
                                            pressed: true,
                                            ui:'dark',
                                            items:[
                                                     {xtype: 'menuList', width: 200}
                                            ],
                                   },
                                   {
                                            text: 'Template',
                                   },
                                           
                          ],
                         
                 },
 
 
                 {
                          xtype: 'list', // This is where I am calling my list.
//xtype: 'todolist', 
/* This gives a warning: Registering a component with a id (`todo-list`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
*/
store: 'storelist', //Passing the store
itemTpl: '{text}' //Template for displaying
//width: 250,
                 },
                 {
                          xtype: 'toolbar',
                          title: '',
                          ui: 'dark',
                          docked: 'bottom',
                          items:
                          [
                                   {xtype: 'button',text:'Activity Log',width:100,},
                                   {xtype: 'button',text:'Signatures',width:90},
                          ]
                 }
         ],
        
});
 
 
//code for the list view:
 
Ext.define('app.view.todo.TodoList', 
{
  extend: 'Ext.List',
  alias: ['widget.todoList'],
  requires:['app.model.TodoModel'],
  id: 'todo-list',
  xtype: 'todolist',
  config: 
  {
         itemTpl: '{text}',
         ui: 'light',
         width:250,
         store:'storelist',
         scrollable: true,
         allowDeselect: false,
         grouped:true,
  },
});
 
//code for the store:
 
 
Ext.define('app.store.Todo', {
  extend  : 'Ext.data.Store',
 
  config: 
  {
         model   : 'app.model.TodoModel',
         sorters: 'id',
         id:'storelist',
         grouped:true,
         disclosure: true,
    grouper: function(record)
         {
        return record.get('parent');
    },
         data: 
         [
        
                 { id: '1', text: 'A', parent: 'alpha',},
                 { id: '1', text: 'Aa', parent: 'alpha',},
                 { id: '1', text: 'Aaa', parent: 'alpha',},
 
                 { id: '2', text: 'B', parent: 'beta'},
                 { id: '2', text: 'Bb', parent: 'beta'},
                 { id: '2', text: 'Bbb', parent: 'beta'},
 
                 { id: '3', text: 'C', parent: 'gamma'},
                 { id: '3', text: 'Cc', parent: 'gamma'},
                 { id: '3', text: 'Ccc', parent: 'gamma'},
 
         ],
  }
});
 
//Code for the model:
 
Ext.define('app.model.TodoModel', {
  extend: 'Ext.data.Model',
  config:
  {
           sorters: 'parent',
           //fields: ['id', 'text', 'parent'],
           fields: 
           [
                 {name: "id", type: "string"},
                 {name: "text", type: "string"},
                 {name: "parent", type: "string"},
           ],
           proxy: 
           {
                 type: 'ajax', //type: 'memory',//rest, ajax
                 url: 'todolist',
                 reader: {
                 type: 'json',
                 rootProperty: 'todo'
                 },
                 autoLoad: true,
           },
  }
   
});
Debugging already done:
  • none
Possible fix:
  • not provided
Additional CSS used:
  • none
Operating System:
  • Windows 7