PDA

View Full Version : Grid Design Help



pyrite
14 Jan 2011, 12:14 PM
I have a large set of data (1200 rows, 18 columns) that I need to display in a few different ways in a grid.

I am using fetching the data into a store in JSON format.

There are about 5 different ways I need to show parts of the data.

E.g.

1. SELECT * FROM table WHERE request_date < TODAY
2. SELECT * FROM table WHERE request_date = TODAY
3. SELECT * FROM table WHERE request_date < TODAY + 1 Week
4. SELECT * FROM table WHERE request_date < TODAY + 1 Month
5. SELECT * FROM table WHERE order_date = LastBusinessDay

Now what I was doing before I discovered ExtJs, was having 5 queries, and some CSS-based tabs to show 5 different tables on a page.

Now that I'm using ExtJs, I'm trying to figure out the best way to do this. Should I just fetch the whole table (SELECT * FROM table), and then use ExtJs to further filter the data (like the above queries do) into 5 separate grids? Should I use Tab Panels to show 5 separate grids? Should I just use 1 grid, and may be have buttons on the title bar that load the data from the same store in 5 separate ways (is that possible)? Should I create 5 separate data stores for each of the above queries, and use 5 grids?

All of the grids have the same columns (headers), and the same data, just queried from the database in different ways, as show above. So it would be nice if I only had to setup one data grid, and could have some buttons that would load the data not all at once, but per view, all from the same store that gets the data from the server via JSON.

This is my first post, and I want to thank the ExtJS team for their amazing work!

conorarmstrong
14 Jan 2011, 1:52 PM
If your presentation is the same then the same column model & grid should suit all queries.
Why not just pass a parameter back to the server (say chosen in the grid header) indicating which query to run?

ryanyoungsma
14 Jan 2011, 2:04 PM
To further elaborate the above, you can place buttons in the Tbar of the grid that relates to the 5 different datasets you have. Then when the button is clicked you will reload the store with the data you want. See the "params" config in the below code.



tbar : [
{
text : 'Query 1',
handler: function(){
gridStore.reload({params: {query: 1}});
}
},
{
text : 'Query 2',
handler: function(){
gridStore.reload({params: {query: 2}});
}
}
]

pyrite
14 Jan 2011, 2:05 PM
So you're saying, just have one grid on the page, and put some buttons in the grid title bar to fetch the data for each query from the server?

*EDIT*
So in theory, the grid itself would be kind of acting like a tab panel?

ryanyoungsma
14 Jan 2011, 4:01 PM
Exactly.

With your case the only thing that changes is the data due to a "limiting" factor. i.e. "WHERE request_date < TODAY + 1 Month" , so there is no need to have multiple grids. All you are doing is just running the query on the backend and "reloading" it to the current grid panel.

I would not compare this to a Tab Panel in any way. It is MUCH more functional, and besides in ExtJs a gridPanel can be a tab in a TabPanel. Well all to confusing there I know. The basic answer, all you need to do is reload the data to the existing store.

pyrite
14 Jan 2011, 4:28 PM
Awesome!

I think I almost have it working. Question is, how does the user know which "tab" is active. Meaning, I've got 5 buttons on the title bar now, 1 for each query. Is there a way to make the buttons appear "active". When you use a tab panel, it is obvious by the look of the tabs which one is active, not sure how to do it this way.

Another idea might be to change the title of the grid depending on which button was pressed, not sure how to do that yet, but it would probably be after store.reload somehow.

ryanyoungsma
14 Jan 2011, 5:45 PM
There is a config option for the button called "pressed". I usually set this for the default, then call a function like the below code to toggle the rest when a user clicks other buttons.



//b = button pressed initially.
toggleButtons: function(b){
var btns = myGrid.getTopToolbar().findByType('button');
Ext.each(btns, function(item){
item.toggle(false);
});
b.toggle(true);
}
You can use setTitle() to alter the title of the panel.

pyrite
14 Jan 2011, 7:56 PM
I got the "pressed" part working on the default, and also got the setTitle() working too.

I can't figure out where to put the code you posted though? Or how to use it?

*EDIT*
I got what you posted working by calling toggleButtons(this); inside the handler for each button, and then defined the function in the root of the javascript file as:



//b = button pressed initially.
toggleButtons = function(b){
var btns = grid.getTopToolbar().findByType('button');
Ext.each(btns, function(item){
item.toggle(false);
});
b.toggle(true);
}


Not sure if that is what you were trying to advise me to do though, but it works! :D

Thank you guys so much for all the help, I'm starting to really like this framework.

ryanyoungsma
15 Jan 2011, 6:05 PM
Yes, looks like you are good to go. Sorry, the original code was basically copied from one of my base classes that extend a panel. That's why it was formatted as such.

pyrite
16 Jan 2011, 12:27 PM
Yes, Thank you, everything works that we talked about on this thread. I do have some other questions, but I think it would be better to start or reply to other threads on those topics.