using Data Stores?

[Cyberqat]

Hi All,

I'm wondering if anyone has some decent examples or tutorials on how to use Data Stores with ExtJS Designer?

i am trying to create a chooser dialog that has a list to chose from. I created the dialog and the data store using extjs. This resulted in the two code files below. What Im stumbling on a bit is what to add to the WorldChoser.js file and/or the WorldsListData.js file to end up with a dialog that I can instantiate with the data to be chosen from in an array passed in at instantiation time.

Any pointers on the ExtJS Designer friendly way to do this would be appreciated...



WorldChooserUi = Ext.extend(Ext.Window, {
title: 'World Chooser',
width: 318,
height: 250,
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: 'Double click to go to a world....',
store: 'WorldsListData',
width: 304,
region: 'center',
height: 164,
columns: [
{
xtype: 'gridcolumn',
header: '',
sortable: true,
resizable: true,
width: 300,
dataIndex: 'worldname',
id: 'WorldName'
}
]
}
];
this.bbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Create World',
allowDepress: true,
ref: '../createWorldButton'
},
{
xtype: 'button',
text: 'Delete World',
autoWidth: true,
allowDepress: true,
ref: '../createWorldButton'
}
]
};
WorldChooserUi.superclass.initComponent.call(this);
}
});



This is the generated DataStore code:



WorldsListData = Ext.extend(Ext.data.ArrayStore, {
constructor: function(cfg) {
cfg = cfg || {};
WorldsListData.superclass.constructor.call(this, Ext.apply({
storeId: 'WorldsListData',
autoSave: false,
fields: [
{
name: 'worldname'
}
]
}, cfg));
}
});

[jarrednicholls]

Well actually, you don't need to add anything to the two generated files. Rather, you just need to instantiate and use those classes (in some different file typically...e.g., your "engine").

You'll be happy to hear that we're planning on adding the ability to create local data in your stores (rather than pulling from an Http endpoint), including a "Store Builder" utility. But in the meantime, this is all you'll need to do to use these two classes:



var worldsStore = new WorldsListData();

// Local data
var data = [['world 1'], ['world 2'], ['world 3']];

// Load local data to ArrayStore
worldsStore.loadData(data);

// WorldChooser.js should be generated, which is a sub-class
// of WorldChooserUi (WorldChooser.ui.js)
var worldChooser = new WorldChooser();

// Show the Window
worldChooser.show();


And that's it. Your grid is already bound to the store via the storeId, and thus all you need to do is instantiate your store, instantiate your world chooser, and then fill the store with data. You can fill the store with data before or after you create your world chooser...

Hope that helps!

[Cyberqat]

Terrific! Thank you!