EXTJS 4.0 grid in an inactive tab shows nothing - extjs

I create a tab panel with two tabs, first one is active and second isn't.
Then I create two grids and render them to first tab content and second tab content.
The first tab shows fine, and the inactive one shows nothing but only the gird layout appears.
I tried to put two grids into the active tab, and it works.
But I want each tab to contain one grid, how can I achieve this?

Related

How can I get back my lost Checkboxes (after moving them from the Form to the Panel)?

I placed several panels on my form. When I clicked the central panel in the designer, the main form was what was actually selected (even though the panel should be on top of it, and the main form should not be (easily) clickable in the designer).
By the way, clicking the other panels on the form don't have this problem (all of the other panels are on top of the form).
Because of the form being clicked when I expected that I was clicking the panel, when I added several controls to what I thought was the panel (after successfully adding some labels on top of the panel), all of these controls (checkboxes) ended up on the form / below the panel, so that they don't display at runtime:
When I realized that the controls were on the form, and not on the panel, I selected the form from the Property browser, selected all of the checkboxes at once, and cut the group of them.
I then selected the main panel from the Property Browser, and pasted those cut checkboxes onto the panel. It sort of worked, but all I saw was their outline (all selected together). I used the Ctrl+Up arrow to move them in a body up on the panel, a little at a time, until they were all near the top where they belong. But then they just disappeared.
From now on I will make sure to right-click the panel and select "BringToFront" before adding any controls to that area; for now, though, I don't see the checkboxes on either the form or the panel. How can I get them back (and place them on the panel), and prevent the form from ever appearing on top of the panel (except if/when I select it from the Property browser)?
The checkboxes do still exist, although their names were changed from "ckbxAll" etc. to Checkbox1, etc. They appear on the correct panel in Form1Designer.cs, but do not display. Here is how they are represented there:
// panelMain
//
this.panelMain.BackColor = System.Drawing.Color.White;
this.panelMain.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
this.panelMain.Controls.Add(this.checkBox21);
this.panelMain.Controls.Add(this.checkBox20);
this.panelMain.Controls.Add(this.checkBox19);
this.panelMain.Controls.Add(this.checkBox18);
this.panelMain.Controls.Add(this.checkBox17);
this.panelMain.Controls.Add(this.checkBox16);
this.panelMain.Controls.Add(this.checkBox15);
this.panelMain.Controls.Add(this.checkBox14);
this.panelMain.Controls.Add(this.checkBox13);
this.panelMain.Controls.Add(this.checkBox12);
this.panelMain.Controls.Add(this.checkBox11);
this.panelMain.Controls.Add(this.checkBox10);
this.panelMain.Controls.Add(this.checkBox9);
this.panelMain.Controls.Add(this.checkBox8);
this.panelMain.Controls.Add(this.checkBox7);
this.panelMain.Controls.Add(this.checkBox6);
this.panelMain.Controls.Add(this.checkBox5);
this.panelMain.Controls.Add(this.checkBox4);
this.panelMain.Controls.Add(this.checkBox3);
this.panelMain.Controls.Add(this.checkBox2);
this.panelMain.Controls.Add(this.checkBox1);
this.panelMain.Location = new System.Drawing.Point(160, 0);
this.panelMain.Name = "panelMain";
this.panelMain.Size = new System.Drawing.Size(639, 740);
this.panelMain.TabIndex = 2;
//
UPDATE
It turns out they ARE there, but they are invisible now (except for their outlines when I click on them):

Ionic - Wrong tab active after changing tabs template

I am learning Ionic and I am stuck in one place because I want to change my default tabs layout to other one.
When I change to state where I reload my tabs layout, in new layout there is always selected second one, no matter what I do... I want first tab to be selected.
Here is plnkr. Go to friends, click one and look on tabs at bottom. Second one is active :(
$ionicTabsDelegate is not working (Or I have done something wrong)
http://plnkr.co/edit/AGNLaMqY6Hzbm5SVcgwI
Do you have any ideas why it's happening?

adding new tab manually and changing focus to it

So, in my <tabset> I have 3 sets of tabs. I first have three static tabs, then N dynamic tabs, and then an "add tab."
When you click on the add tab, you get a small input with which you can select your "layer type"
And when you select one, it adds a new tab of that type.
What I'm trying to do is make it so it selects that new tab, and deselects the "add tab." I've tried keeping an array of currently active tabs and checking every tab manually for "active", but for some reason, it always thinks the last tab is active, even when I manually set it's active to false and splice a new one into the array with true.
Any thoughts on how this can be accomplished?
In the tab set an active flag
<tab header="..." active="tabs.tab1"....>
In your controller setup a map of the tabs
$scope.theTabs = {'tab1':false, 'tab2':false };
To make a tab active or inactive you just need to set the flag to true/false
$scope.theTabs['tabl1'] = true;
Works great.
What I essentially had to do was remove the "funny stuff" from the tabs. That means no select menus, no weird controls that can take focus, etc. When those went away, my problems with tab focusing did as well.

How to STOP my ExtJS panel from duplicating itself

I have a panel "Person" and inside of this panel I create another panel "Info" with some buttons to add functionality. There is yet another panel where you can choose from a list of "Person"'s. My problem is that when you select another "Person" from the overView panel that my "Info" button gets duplicated. So if you have clicked on 6 different "Person"'s that browser session, then you will have 6 different "Info" Panels within "Person".
Any suggestions will be helpful.
What I usually do for a page with multiple selections is put the panel that gets recreated in a window. Then when you need to create another panel of the same type, you make a new window. Therefore you don't need to clear out the previous window.

ExtJs: Programly select rows of a GridPanel in an inactive tab not working?

Basicly, I have a window contains two tabs, the second tab is a GridPanel and is initially inactive.
I want to programly select two rows of this GridPanel(via CheckboxSelectionModel) by clicking a "show window" button , but found it not working. There will be a javascript error thrown and no rows selected. After I manually clicked the second tab to make the grid visible, everything works well.
what's the most possible mistake I made?
I'll paste the code soon if it's not a common mistake for extjs beginner.
This is because your tabpanel will not render any components that are not visible (i.e., any components in your second tab in this case).
If you add the following config option to your Ext.TabPanel it should fix your problem:
deferredRender: false

Resources