Supply of a 'Store' to a Ext-JS Custom Panel not working -no data displayed

[Bill M]

Hi,

I have built a custom Panel, that I have extended from Ext.panel.Panel. I am trying to supply a Store to it via Ext.create.

var dataPanel= Ext.create('src.view.dataTabPanel', {dataTab_storeArg: dataTab_store});

The Store contents (dataTab_store) were loaded before the creation of this new component. Now, when I do this within the initComponent call in my custom Panel, I set store like this:

store: this.dataTab_storeArg

I have looked at the argument (object) with Firebug, and the data looks valid. However, the Panel is not displaying the contents of the Store. Now, I am not sure if I need to supply a requires of the class that contains the Store, following the class definition. Although, I've tried it and hasn't had any effect.

Like this:
Ext.define('src.view.dataTab_displayPanel', {
extend: 'Ext.panel.Panel',
requires: ['src.store.dataTab_transformStore;], <--- need this??

initComponent: function() {
...
...

Is there any sample code out there that explains how to do this? Or is this not possible without using MVC? I am not currently using it.

Thanks!

[evant]

Ext.panel.Panel doesn't accept a store, because it has no way to know how to display the contents.

In a view, you need to supply a template to tell it what fields to display.
In a grid, you need to supply columns to tell it how to extract the data.

For a panel, there's no such option, because the data is arbitrary.

[Bill M]

Hi Evant,

I made a mistake in what I had described above. I actually have created a 'Grid' that is extended from a 'Panel'. So, I am having trouble being able to pass a 'Store' into the component that I can then use as an argument to the 'store:' property.

Is there a way to do this? The Grid does not seem to display the contents from the 'Store'. I know the original code worked when I had it all in one file. But, I am trying to break it into components to avoid having a monster application.js file.

Thanks!

[evant]

You'll need to show the relevant code.

Typically you'd do something like this:

initComponent: function(){
    this.store = new Ext.data.Store({});
    // stuff
    this.callParent();
}

[Bill M]

Is it possible to pass an already created Store into the Component upon creation of the custom component (which is a Grid)?

I've been trying to do this, and the Store contents are not getting displayed in the Grid.

[evant]

Yes, however:

You'll need to show the relevant code.

[Bill M]

Is it possible to pass an *already created Store* into the Component upon creation of the custom component (which is a Grid)? I'd really prefer to not have to create the Store within the Component.


I've been trying to do this, and the Store contents are not getting displayed in the Grid.


I've tried a number of other things, such as putting a StoreId into the Store Object, and then trying to do a store: Ext.getStoreID('myStoreID') within the initComponent of the Custom Component, and this hasn't worked either.


If you could point me at some example code that shows how to do this, that would be great!


Thanks!

[Bill M]

Ok, I figured it out. The Grid I have been creating was being extended from a Panel. It should have been extended from a Grid. Once I did that, the data store was read properly.

Thanks.