View Full Version : using Data Stores?

10 Jun 2010, 4:12 PM
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'

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));

11 Jun 2010, 6:53 AM
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

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

// Show the Window

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!

11 Jun 2010, 7:24 AM
Terrific! Thank you!