1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    18
    Vote Rating
    0
    shadow_m is on a distinguished road

      0  

    Default Answered: How to set value to variable on store load, and use it out of store?

    Answered: How to set value to variable on store load, and use it out of store?


    Hello, I have problem and hope you will help me.
    I want to set value to variable on store load, and use this variable out of my store. How can I do it?

    Code:
    var myValue;//undefined
    strore	= Ext.create('Ext.data.JsonStore', {
    	autoLoad: false,
    	autoSync: true,
    	storeId: 'strore',
    	proxy: {
    		type: 'ajax',
    		url: './php/SelectColumnSize.php?GridName='+GridName,
    		reader: {
    			type: 'json',
    			root: 'data'
    		}
    	},
    	fields: [
    		{
    			name: 'size'
    		}
    	],
    	listeners: {
    				load: function() {
    				myValue = Ext.getStore('ColumnSizeStore722').getAt(2).data.size //100
    				alert(myValue); // show 100
    				}
    			}
    });
    
    
    alert(myValue); //undefined, Why ???


    Thanks

  2. Yep, there's many ways to do that. It depends on which Ext version you are using:
    • You can cancel the rendering if you listen to beforerender, then manually render yourself
    • You can render with default widths, then reconfigure the view with the custom widths
    • You can add the grid to your container only on the store.load event
    • In Ext 3.x, you can dynamically reconfigure the grid using meta properties in the data response for the grid's store
    • You can have the server send you the entire component config as a string and you can parse it yourself

  3. #2
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Answers
    3
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default


    The store load is asynchronous, so you either execute your logic inside the load listener or if you manually load the store, you can provide a callback:

    Code:
    // manually trigger the data store load    
    store.load({        // store loading is asynchronous, use a load listener or callback to handle results        
        callback: function(){           
             Ext.Msg.show({                
                     title: 'Store Load Callback',               
                     msg: 'store was loaded, data available for processing',               
                     modal: false,                
                     icon: Ext.Msg.INFO,                
                     buttons: Ext.Msg.OK            
              });        
          }    
    });

  4. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    18
    Vote Rating
    0
    shadow_m is on a distinguished road

      0  

    Default


    It did not help me. Out of the store my variable is still undefined

  5. #4
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Answers
    3
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default


    Yep, it will always be undefined outside because that line is executed immediately. It won't have data because the store is not loaded yet. You'll have to use it after the store is loaded and has data, and using the 'load' listener is how you know the store got loaded.

    PHP Code:
    var myValue;//undefined
     
    strore Ext.create('Ext.data.JsonStore', {
        
    autoLoadfalse,
        
    autoSynctrue,
        
    storeId'strore',
        
    proxy: { .. },
        
    listeners: {
          
    //executes only after all store.load() calls
          //it becomes an anonymous function during parsing but does not get called
          //immediately
          
    load: function(theStore,theRecords,success /*...*/) {
              
    //you have access to the store and the loaded records here ...
          
    }
        }
    });

    //this line of code is executed as soon as it it 
    //parsed by the javascript engine
    alert(myValue); 

  6. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    18
    Vote Rating
    0
    shadow_m is on a distinguished road

      0  

    Default


    I need to load datastore where I will store column sizes for grid columns.
    After, I want to load grid with column width from my store:

    Problem: grid is rendered before store is load :-(
    is any solution how to render grid only after store load?

    width: Ext.getStore('store').getAt(0).data.size

    Code:
    {
    	xtype: 'gridcolumn',
    	width: Ext.getStore('store').getAt(0).data.size,
    	dataIndex: 'telefon',
    	text: 'Телефон',
    	field: {
    		xtype: 'textfield'
    	},
    	renderer: GreenGrtayColor
    },

  7. #6
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Answers
    3
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Wink


    Yep, there's many ways to do that. It depends on which Ext version you are using:
    • You can cancel the rendering if you listen to beforerender, then manually render yourself
    • You can render with default widths, then reconfigure the view with the custom widths
    • You can add the grid to your container only on the store.load event
    • In Ext 3.x, you can dynamically reconfigure the grid using meta properties in the data response for the grid's store
    • You can have the server send you the entire component config as a string and you can parse it yourself

  8. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    18
    Vote Rating
    0
    shadow_m is on a distinguished road

      0  

    Default


    I am using ExtJS 4.02a

  9. #8
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    You can specify a grid without columns, after the store load you can do a reconfigure on the grid

    Code:
    grid.reconfigure( [Ext.data.Store store], [Object[] columns] )
    Store can be ommitted in the reconfigure function.

    Or other option check the grid.columns array for your column you want to adjust. And do

    Code:
    grid.columns[index].setWidth(myValue);
    The last is better I think

  10. #9
    Sencha User
    Join Date
    Jun 2010
    Posts
    18
    Vote Rating
    0
    shadow_m is on a distinguished road

      0  

    Default


    I am using this solution, but performance is very bad 10-20 columns in 13 grids

    Code:
    ColumnSizeStore = Ext.create('Ext.data.JsonStore', {
    	autoLoad: true,
    	autoSync: true,
    	storeId: 'ColumnSizeStore',
    	proxy: {
    		type: 'ajax',
    		url: './php/SelectColumnSize.php?GridName='+GridName,
    		reader: {
    			type: 'json',
    			root: 'data'
    		}
    	},
    	fields: [
    		{
    			name: 'size'
    		}
    	],
    	listeners: {
    				load: function() {
    					
    					var StoreLength = ColumnSizeStore.data.length;
    					for(var i = 0; i < StoreLength; i++){
    					//ColumnSizes[i] = ColumnSizeStore.data.items[i].data.size;
    					Ext.getCmp(GridName).columns[i].setWidth(ColumnSizeStore.data.items[i].data.size);
    					};
    				}
    			}
    });

  11. #10
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Answers
    3
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default View Events?

    View Events?


    Could it be that the events from the view are slowing you down? Each time you change a column setting, you'll get several events fired. Stop events on the view, set the widths, the re-start the events. Should be much much faster.

Thread Participants: 2