View Full Version : odd behavior with tabs

22 Sep 2009, 10:57 AM
Here's my page;


To see the problem click on the tree, Folder One - > movies table. The movie data will appear, with 2 tabs, and the schema content appearing not in the schema tab but outside of the tab.

What is odd is the content that is assigned to the Schema tab is appearing outside of the tab until the schema tab is clicked, then the content is magically moved into the correct tab. Any ideas about this?

And while I'm at it does anyone know of some good examples that allow for the dynamic creation of new columns in an existing editor grid?

22 Sep 2009, 11:18 AM
1) Why is the page named "jquery_table_gui" ?
2) You're not configuring your TabPanel with a height, so ExtJS is ignoring your HTML and resizing it based on the item it knows, which is the grid panel
3) Please don't post help-related content in the "open discussion"

22 Sep 2009, 11:19 AM
to fix this problem, set deferredRender to false on the tab panel.

22 Sep 2009, 11:22 AM
'Why is the page named "jquery_table_gui" ?'

I've been going back and forth using jquery and extjs, it still uses a little jquery but more of this is now extjs. Hope it didn't offend anyone.... I would imagine whatever I am doing in jquery can be done in extjs but I haven't figured these things out yet.

22 Sep 2009, 11:29 AM
Dude, certainly no offense at all. :P

I was more curious than anything. Also just want to ensure that you understand the differences, etc.

22 Sep 2009, 11:39 AM
Thanks for the help, I'll keep to the help section from now on - right before I ask for one more thing - since I have you attention perhaps you can point me in the right direction.

As you can see I am not only trying to allow for dynamic interaction with a database, but I also want to allow the user to be able to add columns to the grid.

I am not asking you so much how to do it rather than point me in the right direction as to where someone else has done what I hope to do? I might be over my head here, to add a column to the grid seems fairly complex (I've seen some comments in the forum and I know it can be done, I just don't know how to do it), not to mention since you can add records then I need to modify the corresponding data store to add new records after a new column has been added.

While I am sure it can be done do you know what might be a good place to refer to in order to do this kind of thing? The only solution I can come up with is reloading the editor grid every time it is clicked, but even that seems fairly comlex.

I've said too much already - I guess I am asking that if you know of someone else who has tried to do this ebfore, and if so where I might see their work for some enlightenment.

22 Sep 2009, 11:43 AM
Adding columns to the grid is as simple as using the gridPanel's reconfigure method. See the API for details.

On a side note, If you're going to use ExtJS, you're giong to need to learn about things like the DataStore and how the GridPanel works. I cover this extensively in my book.

22 Sep 2009, 11:53 AM
I find the API dense and opaque. At times it is useful, other times its over my head, I can't always make the connections. I've tried to figure things out on my own, it's been a struggle to get to this point. I have no doubt that it's easy - for you! Especially if you wrote a book!

I bought another one (Learning ExtJS by Packt), although I can justify paying for another one IF you think it will break things down well enough that it will make more sense so I can get this done. I have a deadline in less than 2 weeks.

So is adding a column, as well as modifying the data store covered in your book? I have a vague understanding of how they work (they are covered in Learning ExtJS) but it does not necessarily explain how to modify it, nor modify an editor grid. If I could get my head around the documentation better perhaps I could figure it out, but right now it is just a little beyond my capacity.

So in your professional opinion - do you think your book will help me? Try to ignore your own biases here....

22 Sep 2009, 12:03 PM
It doesn't cover modifying a grid. But it does go very deep into how and the GridPanel works, for instance, it identifies the supporting components. I honestly think that these fundamentals aid one into understanding how to achieve the customizations they require. Even though we'd all like to, we typically crawl before we can walk. It's easy to hobble code from examples together. However, the instant you need to do something that is not covered by examples, the task gets so much harder.

Here are some of the figures in that chapter:

22 Sep 2009, 12:15 PM
How do you think it compares to your book? It's worth something, since what I have would not exist were it not for the book.

For the $27.50 you're charging for the e-book, does this entitle me to the latest version when the book is complete, or do I need to buy it again when it is complete?

And last but not least have you seen anyone try to do what I am doing? Is it posted somewhere that I can have a look? Examples are always a good place to start.

22 Sep 2009, 12:37 PM
$27.50 entitles you to the eBook for the early access edition + updates as I pump them out. I Have four chapters left to write. I'm polishing up the DataView and listView chapter now. Next is Graphs and Charts, then on to Extensions and Plugins.

Here is a quick example on how to add a column to the grid.

var doNewColumn = function(btn, text) {
if (text.lengh < 1) {
return false;

var grid = Ext.getCmp('myGrid');

// Extract the column definitions
var columns = [];

Ext.each(grid.colModel.config, function(column) {
header : column.header,
dataIndex : column.dataIndex

header : text,
dataIndex : text
var newColModel = new Ext.grid.ColumnModel(columns);

// Extract the raw data to be placed inside of the new store
var oldRecords = [];
Ext.each(grid.store.getRange(), function(record) {

// list of field definitions
var oldFields = grid.store.reader.meta.fields;

var newStore = new Ext.data.JsonStore({
fields : oldFields,
data : oldRecords
grid.reconfigure(newStore, newColModel);

var newRecord = new newStore.recordType({
name : 'New record',
age : 999

newRecord.set(text, text);


var bbar = [
text : 'add new column',
handler : function() {
Ext.MessageBox.prompt('', 'New column', doNewColumn);

var grid = new Ext.grid.GridPanel({
id : 'myGrid',
columns : [
{ header : 'name', dataIndex : 'name' },
{ header : 'age' , dataIndex : 'age' }
store : {
xtype : 'jsonstore',
fields : [ 'name', 'age' ],
data : [ {name : 'Jay', age : 30 } ]
bbar : bbar

new Ext.Window({
height : 200,
width : 300,
layout : 'fit',
items : grid