View Full Version : ExtJS Form Howto

4 Jul 2012, 8:59 AM

i use the desktop-example for my own project. When i define a new window, i use the "loader"-property to show another url in my window. but finally, when i open the window, i see only the rendered html, not the forms, i defined in the javascript-tag.

My question: how to use the loader to display a form in my window? Btw: i set the "scripts"-property to true.

Thanks for your help.



The .js-file:

win = desktop.createWindow({
id: '...',
title: '...',
width: 640,
height: 480,
iconCls: '...',
animCollapse: false,
border: false,
hideMode: 'offsets',
loader: {
url: MyDesktop.Catalyst.uri_for('/.../...'),
autoLoad: true,
scripts: true

The Catalyst-Template:

<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
layout: {
type: 'accordion',
animate: true
items: [{
xtype: 'form',
id: '...',
frame: true,
title: '...',
plain: true,

5 Jul 2012, 10:50 AM
See if this will produce the result you are looking for:

Ext.onReady(function() {
myPanel = Ext.create('Ext.Panel', {
width: 300,
height: 100,
title: 'Title',
layout: 'vbox',
frame: true,
renderTo: Ext.getBody(),
items: [
xtype: 'button',
text: 'Click to open window',
handler: function(b, e) {
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/field-types.html" width="100%" height="100%" ></iframe>',
width: 700,
height: 500