Ext4 Form Panel combining static HTML with dynamic Ext components
HTML
<link rel="stylesheet" href="/js/lib/ext-4.0.2a/resources/css/ext-all.css">
<div id="form">
<div>Custom Markup</div>
<div id="text1" ></div>
<div>Custom Markup</div>
<div id="text2" ></div>
<div>Custom Markup</div>
</div>
JavaScript
Ext.require(['Ext.layout.Layout'], function() {
Ext.override(Ext.layout.Layout, {
renderItem: function (item, target, position) {
if(item.renderItemTo) {
// render 'renderItemTo' components into the specified DOM element
item.render(item.renderItemTo, 1);
// don't allow container layout to seize the component
item.layoutManagedHeight = 2;
item.layoutManagedWidth = 2;
} else {
// just use standard Ext code for non-renderItemTo components
this.callOverridden(arguments);
}
},
isValidParent: function(item, target, position) {
// signal Ext that we are OK with were our 'renderItemTo' component is right now
// otherwise it would get moved during the layout process
return item.renderItemTo ? true : this.callOverridden(arguments);
}
});
});
Ext.onReady(function() {
var panel = Ext.create('Ext.form.Panel', {
contentEl: 'form',
title: 'My FormPanel with special FX',
items: [
{
xtype: 'textfield',
renderItemTo: 'text1',
fieldLabel: 'Label 1',
},
{
xtype: 'textfield',
renderItemTo: 'text2',
fieldLabel: 'Label 2'
}
]
});
Ext.create('Ext.window.Window', {
width: 300,
layout: 'fit',
items: [
panel
]
}).show();
panel.add({xtype:'textfield',
fieldLabel:'1123123123'})
});