List - “[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found

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 1^st one is displayed inside a panel along with the segmented Button and a toolbar with two buttons.

2. And 2^nd 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

Attachment 32617 Attachment 32618

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 1^st 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

Along with the above problem, I have a question for you:

Can I not use a component twice...?? Like in the case of a list view above...

Were you able to find a solution to this issue? I am getting a very similar error.

I ran into this same warning message. Digging through the source, I found that the StoreManager was throwing that error, since it could not locate the store in its list of registered stores. The way to register a store in the StoreManager is to add the storeId config to the store definition.

When I added the storeId config to the store, and used that to reference the datastore in my nestedlist, the warning went away.

http://docs.sencha.com/touch/2-0/#!/...re-cfg-storeId

I'm getting this same warning with a list in an Ext.Panel in an Ext.TabPanel. Trying to set a storeId on the store and reference the store by that storeId in the list does not work, either.

Quote:

---

Originally Posted by svessels

I'm getting this same warning with a list in an Ext.Panel in an Ext.TabPanel. Trying to set a storeId on the store and reference the store by that storeId in the list does not work, either.

---

I have tried the same recommendations and have not resolved this issue yet either.

I've reviewed you code and found several issues you'll need to address:

1) You've defined your todolist with an id. You do not want to do this as this means your will not be able to create more than one todolist. The proper way to use an id is to set it as a configuration like follows:

Code:

---

{
    xtype: 'todolist',
    id: 'todoList-1'
}

---

then later:

Code:

---

{
    xtype: 'todolist',
    id: 'todolist-2'
}

---

We see this mistake quite a bit, and it's what's causing you to see the 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()`"

2) I'm assuming you want to share the same Store between the two todolists. That's fine, but you've never actually created the shared Store for them to use. In addition, you'll want to use id as a property of your store, not a configuration option. This will mean that there can only ever be ONE Todo store, but I am assuming this is by design.

Code:

---

    Ext.define('app.store.Todo', {
        extend:'Ext.data.Store',
        id:'storelist',
        config:{
.
.
.

---

Remember that this only DEFINES your Todo store, it doesn't create it. This is why you are getting the warning (The specified Store cannot be found). So you will need to create this store as well:

Code:

---

    Ext.create('app.store.Todo');
    var listpanel = Ext.create('Ext.Panel', {
    ...
    var mainMenu = Ext.create('Ext.Panel', {
    ....

---

With these changes, you application works as it should with no more warnings.

As for the other posters, if the items I posted don't relate to your cases or you still have issues. Please feel free to start a new thread with your code as savitanebula did an I'll be happy to look it over.

Quote:

---

Originally Posted by Jamie Avins

I've reviewed you code and found several issues you'll need to address:
2) I'm assuming you want to share the same Store between the two todolists. That's fine, but you've never actually created the shared Store for them to use. In addition, you'll want to use id as a property of your store, not a configuration option. This will mean that there can only ever be ONE Todo store, but I am assuming this is by design.

Code:

---

    Ext.define('app.store.Todo', {
        extend:'Ext.data.Store',
        id:'storelist',
        config:{
.
.
.

---

Remember that this only DEFINES your Todo store, it doesn't create it. This is why you are getting the warning (The specified Store cannot be found). So you will need to create this store as well:

Code:

---

    Ext.create('app.store.Todo');
    var listpanel = Ext.create('Ext.Panel', {
    ...
    var mainMenu = Ext.create('Ext.Panel', {
    ....

---

With these changes, you application works as it should with no more warnings.

---

I was encountering the same warnings, as described from the thread author, and following your instructions fixed those. Thanks.