Results 1 to 3 of 3

Thread: using Data Stores?

  1. #1
    Ext User
    Join Date
    Jan 2010
    Posts
    36
    Vote Rating
    0
      0  

    Default using Data Stores?

    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...

    Code:
    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:

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

  2. #2
    Sencha User jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
      0  

    Default

    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:

    Code:
    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!

  3. #3
    Ext User
    Join Date
    Jan 2010
    Posts
    36
    Vote Rating
    0
      0  

    Default Thanks!

    Terrific! Thank you!

Similar Threads

  1. Efficiency of ExtJS data stores and large data sets
    By BlueCamel in forum Community Discussion
    Replies: 14
    Last Post: 17 Jan 2012, 10:17 PM
  2. Two Data stores within one request
    By radic in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 3 Jan 2008, 7:16 AM
  3. IE stale data stores?
    By oregontarheel in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 20 Sep 2007, 12:27 AM
  4. 2 Data Stores 1 HTTPProxy
    By kouphax in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 16 May 2007, 2:31 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •