PDA

View Full Version : Buffered scroller doesn't work when populated with data from HTML5 database



conderol
7 Jun 2012, 7:28 AM
Ext 4.1
Hi. I am populating grid with a data taken from html5 database, I use for this an example for buffered grid that sencha provide in example area.
I do see that the data is populated in the array I use as a source of the grid, but grid is never populated.
I post my code bellow. As I said it is almost the same as sencha code , with only difference . Since html5 db is async. I need to bind the store in database callback function


Ext.Loader.setConfig({enabled: true});

//Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
]);


Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'PRODUCT_ID', type: 'string'}
]
});


Ext.onReady(function(){
/**
* Returns an array of fake data
* @param {Number} count The number of fake rows to create data for
* @return {Array} The fake record data, suitable for usage with an ArrayReader
*/
function createFakeData(count) {

db = html5sql.openDatabase("TevaOrderCapture", "Teva Order Capture Local DB", 20*1024*1024);
var myProductsData = [ ];
html5sql.process(
["SELECT * FROM PRODUCTS;"],
function(transaction, results, rowsArray){


var i;
var stateColor;





for (i=0;i<rowsArray.length;i++)
{


if (rowsArray[i].PRODUCT_INVENTORY_FLG == "Y")
{
stateColor="BLACK";
}
else
{
stateColor=rowsArray[i].PRODUCT_SOURCE;
}
console.log(rowsArray[i].PRODUCT_ID);
myProductsData.push([rowsArray[i].PRODUCT_ID]);


}
console.log(myProductsData.length);

var store = Ext.create('Ext.data.Store', {
id: 'store',
// allow the grid to interact with the paging scroller by buffering
buffered: true,
// Configure the store with a single page of records which will be cached
pageSize: 5000,
data: myProductsData,
model: 'Employee',
proxy: {
type: 'memory'
}
});
Ext.getCmp("grid").bindStore(store);

return myProductsData;

},
function(error, statement){


alert(error.message);
}
);
//console.log(myProductsData.length);

}


// Create the Data Store.
// Because it is buffered, the automatic load will be directed
// through the prefetch mechanism, and be read through the page cache



var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'Bufffered Grid of 5,000 random records',
store: null,
id: "grid",
loadMask: true,
disableSelection: true,
viewConfig: {
trackOver: false
},
// grid columns
columns:[
{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex:1 ,
sortable: true,
dataIndex: 'PRODUCT_ID'
},
],
renderTo: Ext.getBody()
});

createFakeData();

});

mitchellsimoens
11 Jun 2012, 7:02 AM
I would just have a blank store on the grid and in the callback add records to the store.

conderol
11 Jun 2012, 10:21 PM
It is exactly what I did.
If you take a look "store: null," and in the callback from SQL I populate the store.
But grid is empty