PDA

View Full Version : grid Panel not showing my data



kashim
15 Nov 2011, 2:38 AM
I have created this simple example, but its not showing any data. Can someone help thanks.

//step1 datastore
Ext.create('Ext.data.Store', {
storeId:'addressTable',
fields:["COL1", "COL2", "COL3", "COL4", "COL5", "COL6"],
data:[
["CAR","CARR01","ADDRESS1","Mr R Jones","Oak Way",undefined],
["ORG","0001",undefined,"something","House","St"],
["SHH","SH0000573","ADDRESS1","Mr P Drop","50 Raikeswood","Skipton"]
]
});
//step2 panel
Ext.create('Ext.grid.Panel', {
title: 'Some title',
store: Ext.data.StoreManager.lookup('addressTable'),
columns: [
{text: 'Col1', dataIndex:'COL1'},
{text: 'Col2', dataIndex:'COL2'},
{text: 'Col4', dataIndex:'COL4'}
],
width: 350,
renderTo: Ext.getBody()
});

plrprasad
15 Nov 2011, 2:52 AM
Hi,
I am new to the EXTJS. I am trying to implement different colors for alternative rows in a grid.
Is there any css property for alternate rows.
I tried to override the exiting colors by using
.x-grid-row-alt{
background-color:blue !importnat;
}
in my style.css file but it's not working.
Please help me.

Prasad Reddy.P

khebrela
15 Nov 2011, 3:15 AM
Try this way


//step1 datastore
Ext.create('Ext.data.Store', {
storeId:'addressTable',
fields:[{name: 'Col1'},
{name: 'Col2'},
],
data:[
{Col1: 'Some data', Col2: 'Some data'},
{Col1: 'More data', Col2: 'More data'}
]
});
//step2 panel
Ext.create('Ext.grid.Panel', {
title: 'Some title',
store: Ext.data.StoreManager.lookup('addressTable'),
columns: [
{text: 'Col1', dataIndex:'Col1'},
{text: 'Col2', dataIndex:'Col2'}
],
width: 350,
renderTo: Ext.getBody()
});

plrprasad
15 Nov 2011, 3:25 AM
Hi khebrela,

I want to customise the grid with different colors for each rows.
May be above code don't solve my problem.

Prasad

kashim
15 Nov 2011, 3:25 AM
Thanks for your suggestion, but I need it to work with the dataStore as I have shown ....because this is what the data looks like coming from my .net middle tier.

kashim
16 Nov 2011, 7:06 AM
any ideas anyone?

as a workaround, I have decided to massage the data being returned from the server...so its in the format the grid Panel likes.
This is probably quite inefficient, but I can't think of any thing else at the moment.

superDuke
16 Nov 2011, 7:23 AM
kashim,

Have you seen the examples section? They use Ext.data.ArrayStore, and I think it would work for you:

http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html (http://docs.sencha.com/ext-js/4-0/#!/example/grid/array-grid.html)

kashim
17 Nov 2011, 3:15 AM
your the man superduke!

i'm still a newbie and theres alot of documentation to get thru. (Sencha you might want to improve the performance of the documentation page....it takes ages before I see any pages being loaded, it really off putting).

superDuke
17 Nov 2011, 5:13 AM
Do you have a slow connection or is it just the Sencha documentation? If you're on a slow connection, there is a full copy of the API and examples in your local files. Those can be run locally, check out:

ext-4.0.7\examples\index.html
ext-4.0.7\docs\index.html

If you're on IE, try switching to Chrome or Firefox.

PS,
You've made a good choice in Sencha :)

kashim
20 Nov 2011, 5:03 AM
Thanks superDuke. I will check it out.


---
I have a follow up question. I hope some one can answer.


In my example, I am retrieving 10,000 rows of data from the server. However, the grid is taking a lifetime to render.
So ithought I could make use of infinite scrolling using a memory proxy.


I can't see whats wrong with the code below basically I have assigned a pagesize




var column_array = ["COL1", "COL2", "COL3", "COL4", "COL5", "COL6"];
var data_array = [
["ROW0", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW1", "0001", undefined, "something", "House", "St"],
["ROW2", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW3", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
...
["ROW10000", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"]
]; //upto 10000 rows



// model
Ext.define('Model1', {
extend: 'Ext.data.Model',
fields: column_array
});


//datastore
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'testTable',
model: 'Model1',
pageSize: 200,
proxy: {
type: 'memory'
},
data: initial_data
});


//panel
var grid = Ext.create('Ext.grid.Panel', {
title: 'Testing',
store: store,
columns: [
{ text: 'Col1', dataIndex: 'COL1' },
{ text: 'Col2', dataIndex: 'COL2' },
{ text: 'Col4', dataIndex: 'COL3' },
{ text: 'Col4', dataIndex: 'COL4' },
{ text: 'Col4', dataIndex: 'COL5' }
],
verticalScrollerType: 'paginggridscroller',
loadMask: true,
width: 550,
height: 140,
renderTo: Ext.getBody()
});

superDuke
21 Nov 2011, 5:19 AM
First, please post code in code tags. It is much easier to read. Second, the example for infinite grid loads 200 records at a time, then as you scroll, it fetches more by updating the start/limit parameters. You'd want to use a jsonp or http proxy for your store. Your back-end supports some paging via start/limit or page parameters?

If you are on Chrome, you can use the timeline tool or Speed Tracer plugin to see what's taking a long time.

http://code.google.com/webtoolkit/speedtracer/
http://code.google.com/chrome/devtools/docs/timeline.html (http://code.google.com/webtoolkit/speedtracer/)

kashim
21 Nov 2011, 7:55 AM
Thanks I'll bear that in mind.

With regards to your suggestion about using json. The data has already been retrieved so i don't have to go back to the server to get some more rows. I might end up having to do this, but I thought using a memory proxy means I can refer to a in-memory piece of data. (maybe i'm wrong).

kashim
21 Nov 2011, 7:56 AM
I think I will repost this as a new thread.

superDuke
21 Nov 2011, 8:01 AM
You are right, the memory proxy stores data locally, in memory. But how much time does it take to transfer the data and parse it and render it? And how much memory does storing 10,000 records take? If you must have all 10,000 rows, split up the loading. You can load your data in 200 record increments and have the initial render be quick since your initial data loaded will be small.