PDA

View Full Version : Dynamic grid in dynamic tabPanel = problems



Joe404
3 Aug 2011, 8:56 AM
Hi to all!
I have a grid on the left and I have a tabPanel on the right. When I click a row from the grid, depending on the information coded in the row, I need to create several tabs in the tabPanel. In each new tab, except from the first, I need to put a dynamic grid. It should be dynamic, because I don't know it's column names and how much they are. I have tried so many different ideas and no one was completely successful. Please tell me what should be the right idea and some key moments for creating this task.

P.P.: The information for the dynamic grid/s is taken from normal JavaScript arrays. I've found here in the forum some script with functions, which is especially for adding and deleting columns in grid and I used it (http://www.sencha.com/forum/showthread.php?53009-Adding-removing-fields-and-columns).

napiform
3 Aug 2011, 9:41 AM
Can you provide some more information about how you will receive the dynamic data about what the columns should be?

Joe404
3 Aug 2011, 10:47 AM
Names for the columns are prepared in normal JavaScript array and the data for each row comes from two dimensional JavaScript array.
I've tried this: JavaScript arrays -> Record -> ArrayStore -> GridPanel and it's working but combination of dynamic grid and dynamic tabPanel is the problem.

napiform
3 Aug 2011, 11:00 AM
Names for the columns are prepared in normal JavaScript array and the data for each row comes from two dimensional JavaScript array.
I've tried this: JavaScript arrays -> Record -> ArrayStore -> GridPanel and it's working but combination of dynamic grid and dynamic tabPanel is the problem.

Can you clarify what exactly is working and what is not?

It sounds like you need a listener on the ArrayStore (try the 'load' event) so that whenever a new record is added, you check/update the columns on your tabbed grids. Does that sound like it would do what you want? I can provide more specifics but I'm trying to grasp the general problem.

Good luck.

Joe404
16 Aug 2011, 8:58 AM
Anyway, I managed to solve this problem. You can see the result here (http://www.joe404.hit.bg) (see source code for more info). There are 3 main files: index.html , 1.js and 2.js
Now I got two other problems:
1. I have to create paging for the 2nd grid (the grid in the tabPanel). I don't know how. I have read almost the whole forum and I didn't get any normal result, because my store is dynamic - I change fields each time I click a row on 1st grid or change a tab.
2. The tooltips are not working in FF. They work fine in any other browser, even in IE6. The problem is: after Ext.QuickTips.init(); tooltips are disabled and even if I try to enable them, they stay disabled. Again, this is only on FF.