Create Simple Store and Bind to Grid Client-Side?

  1. #1

    Create Simple Store and Bind to Grid Client-Side?

    I am trying to figure out how to bind a gridpanel from Javascript/Client side...

    
    
    
    ////////////////////////////////////////////////////
    
    
    var myStore = new Ext.data.ArrayStore({
    
    
    autoLoad: true,
    
    
    fields: ['DateStamp', 'CommentsText', 'User'],
    
    
    idIndex: 0 // id for each record will be the first element
    
    
    });
    
    
    ///////////////////////////////////////////////////
    
    
    for (var row = 0; row < commentTable.length; row++) {
    
    
    var myData = [
    
    
    [1, '1/31/2009', 'Test 1', 'Fred'], // note that id for the record is the first element
    
    
    [2, '2/31/2209', 'Test 2', 'Travis']
    
    
    ];
    
    
    myStore.loadData(myData);
    
    
    gpComments.store = myStore;
  2. #2

    RE: Create Simple Store and Bind to Grid Client-Side?

    Whenever I try something as simple as the below - I get an "object expected error"
    
    
    
    <head runat="server">
    
    
    <title></title>
    
    
    <ext:ScriptContainer runat="server" ID="sm1"></ext:ScriptContainer>
    
    
    <script type="text/javascript">
    
    
    Ext.onReady(function() {
    
    
    // sample static data for the store
    
    
    var myData = [
    
    
    ['1/1/2008', 'Test 2', 'Travis'],
    
    
    ['1/31/2008', 'Test 2', 'Pete']
    
    
    ];
    
    
    });
    
    
    // create the data store
    
    
    var store = new Ext.data.ArrayStore({
    
    
    fields: [
    
    
    { name: 'DateStamp', type: 'string' },
    
    
    { name: 'CommentsText', type: 'string' },
    
    
    { name: 'User', type: 'string' }
    
    
    ]
    
    
    });
    
    
    //myStore.loadData(myData);
    
    
    //myStore.load();
    
    
    
    
    
    
    
    
    </script>
    
    
    </head>
  3. #3

    RE: Create Simple Store and Bind to Grid Client-Side?

    For the life of me - cannot get this going - even when using cut and paste samples from ExtJS - on a simple store create - keep getting object expected errors
  4. #4

    RE: Create Simple Store and Bind to Grid Client-Side?

    OK - I have it working with the below - but my question is now - how do I assign new data for each row/result returned the below is returning 10 rows of data but only 1 is being bound to the gridpanel?

    
    
    
    var commentTable = myDetail[2];
    
    
    var myStore = new Ext.data.SimpleStore({
    
    
    fields: [
    
    
    { name: 'DateStamp' },
    
    
    { name: 'CommentsText', type: 'string' },
    
    
    { name: 'User', type: 'string' },
    
    
    ]
    
    
    });
    
    
    for (var row = 0; row < commentTable.length; row++) {
    
    
    var myData = [
    
    
    [commentTable[row].DateStamp,
    
    
    commentTable[row].CommentsText, 
    
    
    commentTable[row].User] 
    
    
    ];
    
    
    }
    
    
    myStore.loadData(myData);
    
    
    var grid = new Ext.grid.GridPanel({
    
    
    store: myStore,
    
    
    columns: [
    
    
    { id: 'company', header: 'Date', width: 160, sortable: true, dataIndex: 'DateStamp' },
    
    
    { header: 'Comments', width: 75, sortable: true, dataIndex: 'CommentsText' },
    
    
    { header: 'User', width: 75, sortable: true, dataIndex: 'User' }
    
    
    ],
    
    
    
    
    
    stripeRows: true,
    
    
    autoExpandColumn: 'company',
    
    
    height: 350,
    
    
    width: 500
    
    
    });
    
    
    // render the grid to the specified div in the page
    
    
    grid.render('grid-example');
  5. #5

    RE: Create Simple Store and Bind to Grid Client-Side?

    Finally got it with the below

    
    
    
    for (var row = 0; row < commentTable.length; row++) {
    
    
    values = {};
    
    
    values['DateStamp'] = commentTable[row].DateStamp;
    
    
    values['CommentsText'] = commentTable[row].CommentsText;
    
    
    values['User'] = commentTable[row].User;
    
    
    record = new Ext.data.Record(values, 0);
    
    
    myStore.insert(0, record);
    
    
    }

Similar Threads

  1. [CLOSED] How I can create a CalendarPanel in client side?
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 18, 2012, 4:51 PM
  2. Bind data to GridPanel Client Side
    By AnandVishnu in forum 1.x Help
    Replies: 1
    Last Post: Sep 14, 2011, 12:18 PM
  3. [CLOSED] reload store and grid on client side
    By ryan.kim in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 12, 2011, 12:39 PM
  4. How to Create MultiCombo at client side?
    By zhangsir199 in forum 1.x Help
    Replies: 4
    Last Post: Aug 20, 2010, 5:53 AM
  5. Bind existing Grid to Client-Side datasource
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Oct 30, 2009, 5:46 PM

Posting Permissions