1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    6
    Vote Rating
    0
    fortunado is on a distinguished road

      0  

    Default How to make the grid ArrayStore loads data from the data record field ?

    How to make the grid ArrayStore loads data from the data record field ?


    Hi,

    How to make the grid store (ArrayStore) loads data from the data record field that stores an array ?

    Please, take a look at this example:

    PHP Code:
    Ext.define('Page', {
        
    extend'Ext.data.Model',
        
    idProperty'id',
        
    fields: ['title','url','tags']
    });

    var 
    pages = [
            {
                
    id1,
                
    title"Main",
                
    url"/",
                
    tags: ["main","head"]
            },
            {
                
    id2,
                
    title"Company",
                
    url"/company/",
                
    tags: ["company","about"]
            }
    ];

    var 
    store Ext.create('Ext.data.Store', {
        
    model'Page',
        
    datapages
    });

    Ext.define('App.TagsGrid', {
        
    extend'Ext.grid.Panel',
        
    alias'widget.tags_grid',
        
    initComponent : function() {
            
    this.columns = [
                {
                    
    text     'Tags',
                    
    flex     1,
                    
    sortable true,
                    
    dataIndex"id"
                
    }
            ];

            
    this.viewConfig = {
                
    stripeRowstrue
            
    };

            
    this.store Ext.create('Ext.data.ArrayStore', {
                
    fields: ['id'],
                
    expandDatatrue
            
    });

            
    App.TagsGrid.superclass.initComponent.call(this);
        }
    });

    var 
    grid Ext.create('App.TagsGrid', {
        
    fieldLabel'Page Tags',
        
    anchor'-5',
        
    name'tags',
        
    dataIndex:'tags',
        
    statefultrue,
        
    stateId'stateGrid',
        
    height200,
        
    width:100,
        
    title'Page Tags'
    });

    var 
    form Ext.create('Ext.form.Panel', {
        
    renderToExt.getBody(),
        
    title'Form Panel',
        
    width600,
        
    fieldDefaults: {
            
    labelAlign'top',
            
    msgTarget'side'
        
    },
        
    defaults: {
            
    borderfalse,
            
    xtype'panel',
            
    flex1,
            
    layout'anchor'
        
    },
        
    layout'hbox',
        
    items: [
            {
                
    items: [
                    {
                        
    xtype:'textfield',
                        
    fieldLabel'Page Title',
                        
    anchor'-5',
                        
    name'title'
                    
    },
                    {
                        
    xtype:'textfield',
                        
    fieldLabel'Page Url',
                        
    anchor'-5',
                        
    name'url'
                    
    }
                ]
            },
            {
                
    items: [grid]
            }
        ],
        
    buttons: ['->', {
            
    text'Save'
        
    }, {
            
    text'Cancel'
        
    }]
    });

    var 
    rec store.first();
    form.loadRecord(rec);
    //grid.store.loadData(rec.data.tags); 
    Grid has dataIndex: 'tags', so why the grid store doesn't load the page.tags on the form.loadRecord ?
    In example, only manual call of loadData works (last commented line).

    If it can not be done automatically by grid/grid store, what event of what control should I handle to perform manual loading data to the grid store ?

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    You're creating two stores, one near the top, another in initComponent on your grid - which do you want to use?

    Also you might wish to try something like this for your store config:

    PHP Code:
        var store Ext.create('Ext.data.Store', {
            
    datatags // or whatever you're calling it
            
    modelmodel // again, or whatever you're calling it
            
    autoLoadtrue
            
    proxy: {
                  
    type'memory'
                  
    reader: { type'json' }
            }
        ); 
    stevil

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    6
    Vote Rating
    0
    fortunado is on a distinguished road

      0  

    Default


    The grid panel needs own store as I understand.
    I have json store for pages, and every page has tags field with an array. And I need to bind this array to grid.
    Thas why I think I need two stores, one for page (json) and one for page tags (array).

    If it ispossible to use grid as just a form field without providing the store, please, advise how to do it.
    If not, I think I should make two stores for pages and page tags somehow depend on each other, through form loading, or any other way. I mean make page tags store (array, for grid) to load current page tags when the page form loads the page record from the page store (json, for form).

    I hope, it is now more clear what I want to do.

    Actually I can do it manually like in example, but I was hoping there are some more elegant and automagically way of doing this.

  4. #4
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    Yes, but the store you create inside the grid doesn't actually point to any data?

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    6
    Vote Rating
    0
    fortunado is on a distinguished road

      0  

    Default


    Something wrong with it ? It is just a component definition.
    Grid store (page tags) doesn't know about data it will be displaying till the form loads the data record (page instance) from the pages store. That's why in the tags grid component I didn't provide any data and perform data loading for grid manually.

    Ideally for me, would be hide the grid store data loading inside the tags grid component and make that grid behave like usual form field, so it would load the data from the page field 'tags'.

    I think there is some misunderstanding about the topic question..
    Imagine you have a json store. It loads records of type 'Record' for instance.
    'Record' type has a field 'array_field' of array type. In this array could be anything: dates, ints, strings, etc.. this array could be in the plain form: not [["John"],["Maria"],["Luck"]] but just ["John","Maria","Luck"]
    So, I create the form for editing 'Record' type, and want the 'array_field' be editable in grid.
    Grid is not a form field and can not be bind to a data simply providing "dataIndex", and requires store to be defined -> that's why I wrote that component with inner store, but I'm stuck on manual data loading. I want make grid behave like form field.

Similar Threads

  1. How to add/remove record in list getting data from an arraystore or Jsonstore.
    By Teenu_Sharma in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Apr 2011, 6:38 AM
  2. Ext.data.Store also loads the data (a second time) when combobox is used
    By jeanluca in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 9 Jun 2010, 6:17 AM
  3. How To Make ArrayStore Filter Data Depending On Combobox Selection?
    By saadkhan in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 1 Mar 2010, 12:50 AM
  4. Replies: 3
    Last Post: 19 Sep 2009, 7:57 AM
  5. How to map a complex json field into an Ext.data.record field?
    By Northdude in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Apr 2008, 11:27 AM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi