View Full Version : Change tabpanel from Grid to Form

28 May 2009, 2:51 AM
Hi everybody,

I'm sure this can be done, but not by me (without help) :)

Ive got a tabPanel, and on one tab I've got a grid. So far, so good. I can click on a grid, and fire a event. But now I want *in the same tab* to 'remove' te grid, and open the record the user clicked on in a form. I can easily do this in a *new, different* tab, but I don't want that... Of course, when the user clicks submit on the form, I want them to get back to the grid again...

ie: how do I change the content of a panel from Grid to Form - and back again?

thanks for any help!


28 May 2009, 3:09 AM
try with saki extension BindManager .

the record the user clicked is saved in "tabPanel".boundrecord

after the grid close/destroy and form rendered , the boundrecord may be used with form load function

i'm not expert it's perhaps not the good way ..

28 May 2009, 10:42 AM
Thank you, Deka49,

after the grid close/destroy and form rendered , the boundrecord may be used with form load function

But that was not exactly what I meant. What I mean is: how do I destroy/create a new control on a tabPanel? That is my problem. I think I can manage the information about the record the user wants...

But my problem is: how can I bind a form to a existing panel, probably while first destroying the grid?

thanks anyway for your time!


28 May 2009, 9:18 PM
Hi Everybody,

solved my own problem, thought I'd post it here... it turns out to be very simple - but maybe not if you are a novice like me..
The grid is obviously the grid clicked on, the tabs is the tabPanel, and there exists one tab called 'Contacts'.

grid.on('rowclick', function(grid,rowIndex,e) {
var record = grid.store.getAt(rowIndex);
var checkbox = e.getTarget('.x-grid3-td-checker');
var tab = tabs.getItem('Contact');

}, grid);

This code destroys the grid that is on the tab, and replaces it with a form. TODO: getting the right data there, submitting the form, and getting back to the grid...! :-)