Tabs in dialog

[John Sourcer]

Hi All,

I have read the forums for 2 days on this issue and still cannot resolve it:


var myform = new Ext.form.Form({
labelWidth: 75
});
myform.add(
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
allowBlank:false
}),

new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175
}),

new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:175
}),

new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:175
})
);


dialogEditProducts.show();
var tabs = dialogEditProducts.getTabs();
var bd = tabs.getTab('tabGeneral');
myform.render(bd.body);

This code and similar always throws a the following error in Firebug:

ct has no properties
http://192.168.0.184/js/ext-all-debug.js
Line 21911

Aby idea's on what I am doing wrong? Thanks for the good work!

[tryanDLS]

Step thru you code - is bd not null? What is bd.body? It's not a valid property of a TabPanelItem - try bd.bodyEl

[John Sourcer]

Thanks for the reply, Tim.

I have stepped and understand the tabpanel a lot better after a bit of reading however I still have a problem:

I try to render my form as follows. The dialog is set to autoTabs: true


myform.render(dialogEditProducts.getTabs().getTab(0).bodyEl);

The html code is as follows:


<div id="dvEditProducts" style="visibility: hidden; position: absolute; top: 0px;">
<div class="x-dlg-hd">
Edit product
</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="General" id="tabGeneral">
<div class="inner-tab">

</div>
</div>
</div>
</div>


Firebug gives me the following error:




this.el has no properties
initEl(null)ext-all-debug.js (line 21600)
render(Object dom=div#tabGeneral.x-dlg-tab id=tabGeneral)ext-all-debug.js (line 21911)
(no name)(Object container=Object id=gridProducts autoHeight=true, 3, Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 3333)
fire()ext-all-debug.js (line 1426)
fireEvent()ext-all-debug.js (line 1236)
processEvent("dblclick", Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 24611)
onDblClick(Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 24631)
h(Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 1547)
Event(dblclick clientX=0, clientY=0)yui-utilities.js (line 13)
[Break on this error] this.id = this.el.id || Ext.id();



My emphasis in bold. It is obviously finding the tab but what am I missing re the null initEl?

Thanks

[John Sourcer]

Nope? There must be something simple I am missing here. Can anyone point me in the direction of how you render a form to a tab?:">

[Animal]

You're giong about it the right way, just got something a bit wonky. Try examining things at the render stage.

See what dialogEditProducts.getTabs().getTab(0) is in Fierbug.

[John Sourcer]

Thanks Animal,

It feels right but something ain't and maybe you can help with another related question on debugging.

Firstly, the code is contained in a fragment, so how do I view it in firebug? It populates the Content Panel fine but I don't see it listed in Firebugs script window ( I do see the POST call in the console to fetch the fragment.

If I:



var tab = dialogEditProducts.getTabs().getTab(0);
alert(tab.id);


It alerts 'tabGeneral' which is correct (I think:">) as per:



<div id="dvEditProducts" style="visibility: hidden; position: absolute; top: 0px;">
<div class="x-dlg-hd">
Edit product
</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="General" id="tabGeneral">
<div class="inner-tab">

</div>
</div>
</div>
</div>

[Animal]

Yes, that's a bit of a problem. The Firebug folks have that on their TODO list.

The only thing then, is to attempt to set a breakpoint in Ext.form.Form.render().

Use ext-all-debug.js, switch into it in the debug tab, and search for "render :" (there will be quite a few instances, so get the correct one), and set a BP at its first line.

Then take a look at things when you stop there.

[John Sourcer]

Hey Animal,

OK spent several hours looking at this problem and am still stumped. I have taken your advice and stepped through from "render :"!

My results are as follows:

Firtsly:




<div id="dvEditProducts" style="visibility: hidden; position: absolute; top: 0px;">
<div class="x-dlg-hd">Edit product</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="General" id="tabGeneral">
<div class="inner-tab" id="tabGeneralBody">

</div>
</div>
</div>
</div>


alert(dialogEditProducts.getTabs().getTab(0).id);
alert(dialogEditProducts.getTabs().getTab(0).bodyEl.id);



Both return "tabGeneral", is this correct? Or should the call to bodyEl.id return "tabGeneralBody"?

The problem seems to appear here in ext-all-debug.js:

21583 Ext.extend(Ext.form.BasicForm, Ext.util.Observable, {
21584
21585
21586
21587
21588
21589
21590
21591 timeout: 30,
21592
21593 activeAction : null,
21594
21595
21596 waitMsgTarget : undefined,
21597
21598 initEl : function(el){
21599 this.el = Ext.get(el);
21600 this.id = this.el.id || Ext.id();
21601 this.el.on('submit', this.onSubmit, this);
21602 this.el.addClass('x-form');
21603 },

on line 21600 'this.el.id' has no properties!:((

[John Sourcer]

OK!

21904 render : function(ct){
21905 ct = Ext.get(ct); //returns the correct tab i.e. tabGeneral
21906 var o = this.autoCreate || {
21907 tag: 'form',
21908 method : this.method || 'POST',
21909 id : this.id || Ext.id()
21910 };
21911 this.initEl(ct.createChild(o)); //Form is correctly created and gets assigned an id of ext-gen437

Step
21598 initEl : function(el){
21599 this.el = Ext.get(el); //el is null

So my guess is that the call to the method initEl from line 21911 is passing null! Why? Is create child failing? 'o' is definetly declared.

[tryanDLS]

I don't see any reason why that would fail. Does this happen in both IE and FF? Are you using the YUI adapter?

[John Sourcer]

Hi Tim,

Good question. In IE it fails at line 267 of ext-all-debug.js:


case "beforeend":
---> el.insertAdjacentHTML(where, html);


It throws an 'Invalid source HTML for this operation.

Is this a bug or am I just &%$& something badly? Has anybody got code where they build a form into a tab on a dialog for me to compare?:-?

[John Sourcer]

OK! Is there another way of doing this?

[John Sourcer]

Last bump as a paying customer before I try another method and ascribe this a BUG!:)

[Animal]

OK!

21904 render : function(ct){
21905 ct = Ext.get(ct); //returns the correct tab i.e. tabGeneral
21906 var o = this.autoCreate || {
21907 tag: 'form',
21908 method : this.method || 'POST',
21909 id : this.id || Ext.id()
21910 };
21911 this.initEl(ct.createChild(o)); //Form is correctly created and gets assigned an id of ext-gen437

Step
21598 initEl : function(el){
21599 this.el = Ext.get(el); //el is null

So my guess is that the call to the method initEl from line 21911 is passing null! Why? Is create child failing? 'o' is definetly declared.

So, ct.createChild(o) is failing.

You need to step into that, and check each stage.

What is "config" in createChild? Does it look like a standard DomHelper form creation config?

What about "this"? does it reference a valid Element with a valid "dom" property that is the div of the Tab you are rendering into?

[John Sourcer]

Hi Animal,

Thanks for replying and all your help. I fixed the bug IN MY CODE!:">:">:">

The code that generated the dialog was in a fragment loaded into a Content Panel. The dialog html was added to the master page. I changed this to put it into the code fragment add all is well.

Thanks again for all your help and pointers. Learnt a lot about ExtJS in the last week and am more impressed by the minute!

[John Sourcer]

Animal and others,

Now I am in a catch22!:((

A Dialog should always be a direct child of the body element. but if I make it a direct child of the body then I can't render the form to it. If I don't make it a direct child I can render the form but it behaves badly including fullscreen greyout on modal: true!

Any help appreciated as I am desperate now.

[tryanDLS]

Can you post an updated version of your code?

[John Sourcer]

Hi Tim,

This is the fragment that populates the ContentPanel when a user selects something:




var arg = 'ViewProductsGrid_xml.aspx?<%= getUrl() %>';

Ext.onReady(function(){

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: arg}),
reader: new Ext.data.XmlReader({
record: 'Table1',
id: 'id',
totalRecords: 'TotalCount'
}, ['name', 'type', 'category', 'uniformat', 'manufacturer', 'rank', 'company'])
});


var cm = new Ext.grid.ColumnModel([
{header: "Description", width: 250, dataIndex: 'name'},
{header: "Type", width: 50, dataIndex: 'type'},
{header: "Revit Category", width: 95, dataIndex: 'category'},
{header: "Uniformat", width: 95, dataIndex: 'uniformat'},
{header: "Manufacturer", width: 120, dataIndex: 'manufacturer'},
{header: "Rank", width: 75, renderer: rank, dataIndex: 'rank'},
{header: "Company", width: 160, dataIndex: 'company'}
]);
cm.defaultSortable = true;

var grid = new Ext.grid.Grid('gridProducts', {
ds: ds
,cm: cm
,autoScroll: true
,autoHeight: true
,autoWidth: true
,fitToFrame: true
,enableDragDrop: true
});
grid.render();

var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
ds.load({params:{start:0, limit:25}});

var id, dialogEditProducts, type;

grid.on('rowdblclick', function(grid, rowIndex, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();
var type = record.data['type'];
var id = ds.data.items[rowIndex].id;
if(!dialogEditProducts){
dialogEditProducts = new Ext.BasicDialog("dvEditProducts", {
autoTabs: true
,modal: true
,width:600
,height:400
,shadow:true
,minWidth:300
,minHeight:250
,proxyDrag: true
});
dialogEditProducts.addKeyListener(27, dialogEditProducts.hide, dialogEditProducts);
dialogEditProducts.addButton('Save', dialogEditProducts.hide, dialogEditProducts);
dialogEditProducts.addButton('Cancel', dialogEditProducts.hide, dialogEditProducts);
}

var myform = new Ext.form.Form({
labelWidth: 75
});

myform.add(
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:175,
allowBlank:false
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:175
})
);
myform.render(dialogEditProducts.getTabs().getTab(0).bodyEl);
dialogEditProducts.show();
});

});

</script>

<div id="gridProducts" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:770px; height: 490px"></div>

//If I put the following here, I can render the form into it but the rule for dialogs being children of body is broken:

<div id="dvEditProducts" style="visibility: hidden; position: absolute; top: 0px;">
<div class="x-dlg-hd">
Edit product
</div>
<div class="x-dlg-bd">
<div class="x-dlg-tab" title="General" id="tabGeneral">
<div class="inner-tab">
a
</div>
</div>
<div class="x-dlg-tab" title="Classification">
<div class="inner-tab"></div>
</div>
<div class="x-dlg-tab" title="Costing">
<div class="inner-tab"></div>
</div>
</div>
</div>

//If I make the above a child of the body, it works fine except I can't render the form

[John Sourcer]

Is there anything else I can do to illustrate this problem more clearly. In short, how do you render a form into a tabbed dialog. The dialog's HTML code must be a child of the body. The 'render' method is called from a nested code fragment in another content panel. Should I try to preload the whole lot? Really stuck here!

[John Sourcer]

I am terribly sorry for all the pain and trouble I have caused myself and you guys over the last 2 days, all by my stupidity!!!

As a headsup for others who may tread my path:

Dialog must be a child of body. My main layout page was an .aspx page with the STUPID form tag wrapping all content inside body.

Result: Dialog is not a child of body.
Remedy: Remove stupid form tags and bang head repeatedly against keyboard!

[JohnPeterson]

Haha, I just ran into this same problem. If you hadn't brought it up I'd have been beating my head against the keyboard forever too. Symptoms were that I had a perfectly good form, but Firebug kept yelling about "this.el has no properties" and was complaining about the render for the form. Turns out I had the form div on the page encased in <form> tags, which as soon as I removed, it worked perfectly. Thanks :)