Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: ArrayReader and MemoryProxy example

  1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    32
    Vote Rating
    0
      0  

    Default ArrayReader and MemoryProxy example

    I am currently trying to reproduce Jay's examples from his book as I am learning Ext JS 3. Before the current point everything went fine, but I can not run an example which starts at page 159. Here is my code:
    Code:
    var arrayData = [
      ['Jay Garcia', 'MD'],
      ['Aaron Baker', 'VA'],
      ['Susan Smith', 'DC'],
      ['Mary Stein', 'DE'],
      ['Bryan Shanley', 'NJ'],
      ['Nyri Selgado', 'CA']];
    
    var nameRecord = Ext.data.Record.create([
      {
        name: 'fullName', //name
        mapping: 0 //1
      },
      {
        name: 'state',
        mapping: 1 //2
      }]);
    
    var arrayReader = new Ext.data.ArrayReader({}, nameRecord);
    
    var memoryProxy = new Ext.data.MemoryProxy(arrayData);
    
    var store = new Ext.data.Store(
    {
      reader: arrayReader,
      proxy: memoryProxy
    });
    
    //var store = new Ext.data.ArrayStore(
    //{
    //  data: arrayData,
    //  fields: ['fullName', 'state']
    //});
    
    var colModel = new Ext.grid.ColumnModel([
      {
        header: 'Full Name',
        sortable: true,
        dataIndex: 'fullName'
      },
      {
        header: 'State',
        dataIndex: 'state'
      }]);
    
    var gridView = new Ext.grid.GridView();
    
    var selModel = new Ext.grid.RowSelectionModel(
    {
      singleSelect: true
    });
    
    Ext.onReady(function ()
    {
      Ext.QuickTips.init();
      
      new Ext.Viewport(
      {
        items: new Ext.grid.GridPanel(
        {
          title: 'Our first grid',
          autoHeight: true,
          width: 250,
          store: store,
          view: gridView,
          colModel: colModel,
          selModel: selModel
        })
      }).show();
    });
    If I uncomment the reassignment of store variable everything works fine, otherwise there is no data in the grid. Please, help me to understand what am I doing wrong.

  2. #2
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
      0  

    Default

    The data needs to be 'loaded' into the store, either using the 'data' property of the store config or via the loadData method of the instantiated store.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    32
    Vote Rating
    0
      0  

    Default

    Code:
    var store = new Ext.data.Store(
    {
      reader: arrayReader,
      //proxy: memoryProxy,
      data: arrayData
    });
    Thanks, this change has fixed my problem but actually there is no need to specify the proxy then. In Jay's example we pass our data to the memory proxy and then pass this proxy to the store. It seems to be enough. Isn't it? Or what is the point of using memory proxy then? Thanks for your answers!

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    32
    Vote Rating
    0
      0  

    Default

    And actually I am currently experiencing the same problem with another Jay's example. May be I have made some errors during the typing but the result is the same - I see no data although the grid view is displayed properly:

    Code:
    var recordFields = [
      { name: 'id', mapping: 'id' },
      { name: 'firstname', mapping: 'firstname' },
      { name: 'lastname', mapping: 'lastname' },
      { name: 'street', mapping: 'street' },
      { name: 'city', mapping: 'city' },
      { name: 'state', mapping: 'state' },
      { name: 'zip', mapping: 'zip' },
      { name: 'country', mapping: 'country' }];
    
    var remoteJsonStore = new Ext.data.JsonStore(
    {
      fields: recordFields,
      url: 'http://extjsinaction.com/dataQuery.php',
      totalProperty: 'totalCount',
      root: 'records',
      id: 'ourRemoteStore',
      autoLoad: false,
      remoteSort: true
    });
    
    var colorTextBlue = function (id)
    {
      return '<span style="color: #0000FF">'+id+'</span>'
    };
    
    var stylizeAddress = function (street, column, record)
    {
      var city = record.get('city');
      var state = record.get('state');
      var zip = record.get('zip');
      
      return String.format('{0}<br />{1} {2}, {3}', street, city, state, zip);
    }
    
    var columnModel = [
      {
        header: 'Id',
        dataIndex: 'id',
        sortable: true,
        width: 50,
        resizable: false,
        hidden: true,
        renderer: colorTextBlue
      },
      {
        header: 'Last Name',
        dataIndex: 'lastname',
        sortable: true,
        hideable: false,
        width: 75
      },
      {
        header: 'First Name',
        dataIndex: 'firstname',
        sortable: true,
        hideable: false,
        width: 75
      },
      {
        header: 'Address',
        dataIndex: 'street',
        sortable: false,
        id: 'addressCol',
        rendered: stylizeAddress
      },
      {
        header: 'Country',
        dataIndex: 'country',
        sortable: true,
        width: 150
      }];
    
    var pagingToolbar =
    {
      xtype: 'paging',
      store: remoteJsonStore,
      pageSize: 50,
      displayInfo: true
    };
    
    var grid =
    {
      xtype: 'grid',
      border: false,
      columns: columnModel,
      store: remoteJsonStore,
      loadMask: true,
      bbar: pagingToolbar,
      autoExpandColumn: 'addressCol'
    };
    
    Ext.onReady(function ()
    {
      Ext.QuickTips.init();
      
      new Ext.Window(
      {
        height: 350,
        width: 550,
        border: false,
        layout: 'fit',
        items: grid,
        
        listeners:
        {  
          afterrender: function ()
          {      
            Ext.StoreMgr.get('ourRemoteStore').load(
            {
              params:
              {
                start: 0,
                limit: 50
              }
            });
          }
        }
      }).show();
    });
    And I have found the solution again:
    Code:
    var remoteJsonStore = new Ext.data.JsonStore(
    {
      fields: recordFields,
      //url: 'http://extjsinaction.com/dataQuery.php',
      totalProperty: 'totalCount',
      root: 'records',
      id: 'ourRemoteStore',
      autoLoad: false,
      remoteSort: true,
      
      proxy: new Ext.data.ScriptTagProxy(
      {
        url: 'http://extjsinaction.com/dataQuery.php'
      })
    });
    But I do not understand why Jay's code does not work. Ext JS 3.4 is not backward compatible with other 3.x versions?

  5. #5
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
      0  

    Default

    The reason your fist chunk of code did not work is because the default proxy for Ext.data.JsonStore is a Ext.data.HttpProxy which will not work with the cross domain URL you specified.

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    32
    Vote Rating
    0
      0  

    Default

    Okay, I see. But Jay said that it should automatically pick the proper proxy based on the url (as it is an external one). Maybe some things changed, I don't know.

  7. #7
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
      0  

    Default

    Yeah, I see that he says that on page 13 of chapter 7 - he was probably just thinking of something else.

    The code for JsonStore is quite straight forward in the way it creates the proxy:

    PHP Code:
            if((this.url || this.api) && !this.proxy){
                
    this.proxy = new Ext.data.HttpProxy({urlthis.urlapithis.api});
            } 
    That will always create a HttpProxy.

  8. #8
    Sencha User
    Join Date
    Apr 2011
    Posts
    32
    Vote Rating
    0
      0  

    Default

    Thanks for your response. But I still wonder what is the point of using the MemoryProxy if it does not bind any data (rolling back to the first question)?

  9. #9
    Sencha User
    Join Date
    Apr 2011
    Posts
    32
    Vote Rating
    0
      0  

    Default

    As there are still no answers I guess it's kind of bug.

  10. #10
    Sencha User
    Join Date
    Aug 2010
    Location
    Silicon Valley
    Posts
    7
    Vote Rating
    0
      0  

    Default Commenting out the memProxy doesn't work for me

    I tried the example, and after I added a store.load(), the grid was populated. But if I comment out the proxy: memoryProxy line, it doesn't work.

    Was that the only change you made?
    L. Emlich

Page 1 of 2 12 LastLast

Posting Permissions

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