PDA

View Full Version : Grid + Tab Panel



mysticav
26 Apr 2008, 12:56 PM
I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .

This is the code:


var tabs2 = new Ext.TabPanel({
renderTo: 'tabpanel',
activeTab: 0,
width:800,
height:500,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
layout:'column',
items:MyGrid,
listeners: {activate: function(){}}
},
{
title: 'Event Tab',
listeners: {activate: function(){}},
html: "Testing."
}
]
});
});

When I load the page there's no error, but the grid is not shown.

What am I doing wrong ?

Is there any thread where I can learn how to add Ext components inside a tab. All the examples in Ext Site just load text, but not components at all.

I want to know how to add a Panel, a Grid, A form, etc inside a tab.
Edit/Delete Message

Thanks.

Animal
26 Apr 2008, 12:58 PM
I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .

What am I doing wrong ?

Thanks.

The usual.

Animal
26 Apr 2008, 1:00 PM
Sorry, but you have to have been there...You are putting a GridPanel into a no layout Panel and putting the no layout Panel into a tab.

Do this:



var tabs2 = new Ext.TabPanel({
renderTo: 'tabpanel',
activeTab: 0,
width:800,
height:500,
plain:true,
defaults:{autoScroll: true},
items:[ MyGrid,
{
title: 'Event Tab',
listeners: {activate: function(){}},
html: "Testing."
}
]
});
});


And just configure the GridPanel with the appropriate title, listeners etc.

mysticav
26 Apr 2008, 1:08 PM
I tried that and what I get is a blank tab with no content.

I wonder doing it that way, how can yo specifiy the tab title, the tab listeners, etc.

The obvious way seems to be adding the Grid as a Tab item. But you're telling me that is not possible.

Is there any workaround ?

Thanks for your solution but still not so clear and not working.

mysticav
26 Apr 2008, 1:29 PM
Is there any thread where I can learn how to add Ext components inside a tab. All the examples in Ext Site just load text, but not components at all.

I want to know how to add a Panel, a Grid, A form, etc inside a tab.

mysticav
26 Apr 2008, 1:37 PM
Here is an image after adding the gridPanel as you told me.

Animal
26 Apr 2008, 2:27 PM
A GridPPanel is a Panel. Panels have the title config. Panels are Observable.



The obvious way seems to be adding the Grid as a Tab item. But you're telling me that is not possible.


No. I am telling you that is what you must do. Not adding the Grid to a no layout Panel, and adding the no layout Panel as a Tab item.

It's as simple as I posted. Create the Grid, use the Grid as an item in the items config. That's it. If you see nothing then you have a bug in your code somewhere else, and you need to post more code.

mjlecomte
26 Apr 2008, 3:16 PM
The usual.I'm not sure which is the winner, this topic or s.gif. A suggestion: add another example to the tab panel examples that includes a grid inside a tab panel.

Animal
26 Apr 2008, 3:37 PM
But the reality of how it should be done (Assuming you have a valid GridPanel) is so trivial that it's not worth it. It is 2 lines of code. See the example that I added to Container (complete with missing property names!)

http://extjs.com/deploy/dev/docs/?class=Ext.Container

Some kind soul corrected the version in SVN to read:



// Create the GridPanel.
myGrid = new Ext.grid.GridPanel({
store: myStore,
colMode: myColumnModel,
title: 'Results',
});

myTabPanel.add(myGrid);
myTabPanel.setActiveItem(myGrid);

Animal
26 Apr 2008, 3:38 PM
Looking at the screenshot posted, I think that the GridPanel tab is just not activated!

mysticav
26 Apr 2008, 11:38 PM
I really appreciate you help.

Now it works.


A GridPPanel is a Panel. Panels have the title config. Panels are Observable. Panels have no layout, etc

Where can I learn that kind of ExtJS theory?. There a lot of design concepts I would like to understand. Like how the different components interact, etc.

Animal
27 Apr 2008, 12:14 AM
That's not an ExtJs mystery, it's perfectly normal OO.

You can see exactly what each class inherits in the API docs. This is just like what you see in standard Javadocs.

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/classdiag.jpg

mjlecomte
27 Apr 2008, 5:48 PM
But the reality of how it should be done (Assuming you have a valid GridPanel) is so trivial that it's not worth it. It is 2 lines of code.

Too true.

It's also already in the examples and explains the common pitfall nicely.
See layout-browser example, combination.js. That example is very well done and showcases layouts nicely.

cookra
27 Jun 2017, 6:40 AM
The usual.


What kind of response is that..

IS THERE a reason why you people who reply with comments like this actually bother. It doesn't make you big or clever. What it does do is circle you out as a complete and utter anti-social parasite.. The worse thing about this is that google keeps this crap alive for the world to see..

Have some decency about you and actually try to remove the smugness.

People come to this forum for help, simple as that. Drop the attitude, if you know the answer and wish to help then help - don't belittle people or try to make them feel stupid..

Trust me on this, YOU wouldn't speak to me like that face-to-face - I promise you.


Help, without sarcasm or just do something else that makes you happy such as Comi Com or perhaps take up Self-Mutilation..


#IattackDestroyRemoveBeliitleTROLLS


Please do respond, as the next step you take needs to be a good one.. Perhaps one of your troll lady-friends could jump in also.. Animal? Your on the list also...

Losers