PDA

View Full Version : Order of 'html' in a tab panel with inputs...



travisbell
14 Oct 2009, 10:10 AM
Hey guys,

I have a tab panel with the following code (example):



xtype:'tabpanel',
activeTab: 0,
defaults:{
autoHeight: true,
autoWidth: true,
bodyStyle: 'padding:10px',
autoScroll: false
},
height: 500,
header: true,
items:[{
title:'Facts',
headerAsText: true,
deferHeight: true,
html: 'Please edit the movie details below.',
labelAlign: 'top',
layout: 'form',

items: [{
xtype: 'hidden',
id: '_slug',
value: '<%= @movie.slug %>'
},{
xtype: 'textfield',
fieldLabel: 'Original Title',
id: '_title',
value: "<%= @movie.title %>",
width: '98%',
labelSeparator: '',
}]
}]


But the html specified in the first block gets rendered after all of the form elements.

How can I make the html (or is there some other way I should do it?) get displayed above the form inputs?

aw1zard2
14 Oct 2009, 10:49 AM
I would use a FieldSet.

http://www.extjs.com/deploy/dev/examples/form/dynamic.html (http://www.extjs.com/forum/../deploy/dev/examples/form/dynamic.html)

You can just have the title with no checkbox in the Form 2 example.

:)

travisbell
14 Oct 2009, 1:10 PM
Thats true, I could probably make that work…

Curious though, there isn't a "proper" way? Drop a <p> tag in there and control the order, as an example?

aw1zard2
14 Oct 2009, 1:20 PM
The HTML content is added by the Panel's afterRender (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.Panel.html#Ext.Panel-afterRender) method, and so the document will not contain this HTML at the time the render (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.Panel.html#Ext.Panel-render) event is fired. This content is inserted into the body before any configured contentEl (http://www.extjs.com/forum/../deploy/dev/docs/output/Ext.Panel.html#Ext.Panel-contentEl) is appended.

Copy and pasted from the API doc.

The html will get added in the afterRender method of the Panel.