PDA

View Full Version : Changing grid nested in a panel



inoabrian
23 Apr 2014, 6:49 AM
How can I change the Ext.grid.panel that I have nested in a Ext.panel.Panel on a click event. I want to change them back and forth whenever a load button is clicked.
Ex. Code: Ext.define('Ext.view.BottomPanel', { extend: 'Ext.panel.Panel', id:'bottomPanel', width: 1000, height: 300, items: [{ title: 'Location', xtype: 'summary' // this is the grid first loaded on app creation }] }); var bottomPanel = Ext.create('Ext.view.BottomPanel'); bottomPanel is then loaded in my application, I have two radio buttons which I have to select what grid to load. "center" or "lower" and a load button for when a selection is made. When a radio button is selected and the load button is clicked I would like bottomPanel to then replace xtype: summary with the following grid.
Ex: Ext.define('Ext.view.Grid', { extend: 'Ext.grid.Panel', alias: 'widget.grid', store: 'CenterDropdown', columns: [ { text: 'ID', dataIndex: 'ID', width: 60 }, { text: 'Name', dataIndex: 'Name', width: 90 } ], height: 200, width: 215 }); NOTE: The grids have different Ext.data.Models I am using a Model View Controller approach that is why I chopped up the code so much sorry. Any help is appreciated, Thank you in advance. Coffee

mitchellsimoens
23 Apr 2014, 7:08 AM
First I would like to show you BBCode (http://en.wikipedia.org/wiki/BBCode) where you can wrap your code in the CODE tags to preserve formatting so it's easily legible like this (only it will get formatted):


your code here

From what I understand from your post, you want to simply remove a grid and add a new grid in correct? Not sure what state your application is in so I can provide a snippet and we can go from there. Assuming you have a reference to the panel containing the grid:


panel.suspendLayouts();

panel.remove(grid);
panel.add(newGrid);

panel.resumeLayouts(true);

Here we remove a grid and add a new grid in (wrapped in suspendLayouts/resumeLayouts so we only have 1 layout run instead of multiple to have better performance.

inoabrian
23 Apr 2014, 7:36 AM
mitchellsimoens, This is what I needed thank you. I will look up the functions in order to understand exactly what is going on. Would I just reverse it to get back the one we removed and vice versa each time the value on button click changes.

mitchellsimoens
23 Apr 2014, 7:42 AM
Removing a component will destroy it and therefor not be able to use it again so you would have to keep a reference around and stop the destruction which isn't hard but maybe not optimal for a beginner.

I think maybe a card layout may be a better fit for you if you are going to switch between two component instances. Here is a Fiddle that allows you to switch between two components on button click:

59p

inoabrian
23 Apr 2014, 7:55 AM
Removing a component will destroy it and therefor not be able to use it again so you would have to keep a reference around and stop the destruction which isn't hard but maybe not optimal for a beginner. Could you show me a snippet to how keeping a reference would work? Because This might be what I need due to size of data in grids.