PDA

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



shadow_m
16 Nov 2011, 10:44 AM
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?



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

superDuke
16 Nov 2011, 11:35 AM
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:



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

shadow_m
17 Nov 2011, 5:40 AM
It did not help me. Out of the store my variable is still undefined :s

superDuke
17 Nov 2011, 5:54 AM
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.


var myValue;//undefined
strore = Ext.create('Ext.data.JsonStore', {
autoLoad: false,
autoSync: true,
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);

shadow_m
17 Nov 2011, 6:31 AM
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



{
xtype: 'gridcolumn',
width: Ext.getStore('store').getAt(0).data.size,
dataIndex: 'telefon',
text: '???????',
field: {
xtype: 'textfield'
},
renderer: GreenGrtayColor
},

superDuke
17 Nov 2011, 6:54 AM
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

shadow_m
17 Nov 2011, 6:57 AM
I am using ExtJS 4.02a

tvanzoelen
17 Nov 2011, 7:00 AM
You can specify a grid without columns, after the store load you can do a reconfigure on the grid


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


grid.columns[index].setWidth(myValue);

The last is better I think

shadow_m
17 Nov 2011, 7:05 AM
I am using this solution, but performance is very bad :s 10-20 columns in 13 grids



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

superDuke
17 Nov 2011, 7:13 AM
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.

tvanzoelen
17 Nov 2011, 7:18 AM
Its tryable, but there is a change your scroller gets buggy if you suspend event on such things.

Its also an option to reconfigure. But making 10-20 column configurations and set them on 13 grids, its doubtfull it will be faster. I think the best thing is to make your grid/column config serverside.

shadow_m
17 Nov 2011, 8:12 AM
How to stop events on the view?

tvanzoelen
17 Nov 2011, 8:16 AM
grid.getView().suspendEvents()

shadow_m
17 Nov 2011, 10:09 AM
I did not notice any changes in performance after stopping events on the view :-?