View Full Version : Adding a form directly to a window

9 Jul 2009, 4:31 AM

I'm trying to add a form to a window, but I'm running into some trouble.. If i add the form directly to the window, the xtype: 'form' doesn't take effect and no form-element is created

That's okay, coz I'm just adding the form as a single item to the window

new Ext.Window({
items: [{
xtype: 'form',
layout: 'form',

To get the right visual effect I'm still creating the buttons directly to the window, but now formBind is ignored, coz the buttons are outside the actual form

Am i doing something wrong when making a form directly in a window? The way I'm doing it is the code above, but with the config options in the windows config, not nested in the items config option

Plz let me know if you need more relevant code to reply

Thanks in advance

9 Jul 2009, 4:40 AM
A little more code would help. But sounds like you've assessed it correctly.

Buttons only bind when they are within a bound form. I have posted some code around somewhere some time back for binding buttons like you're attempting to do. I thought it would be handy to have some kind of bind() method so a component's disabled state could be dynamically bound to a form's valid state.

Make sure you have a layout:'fit' or whatever layout you want on the window config, you don't need layout:'form' on the formPanel child as that is already implied when you specify xtype:'form'.

9 Jul 2009, 4:41 AM
There is a couple of examples of forms in a window in the demos by the way.

9 Jul 2009, 4:50 AM
The code:

objPagesWindow = new Ext.Window({
title: '...',
id: 'pagesadd',
width: 400,
height: 400,
autoScroll: true,
modal: true,
plain: false,
closeAction: 'hide',
border: false,
listeners: {
id: 'pagesaddform',
height: 330,

//Form config
xtype: 'form',
layout: 'form',
url: 'calls/pagesnew.asp',
bodyStyle: 'padding: 10px;',
labelWidth: 100,
monitorValid: true,
defaultType: 'textfield',
defaults: {
anchor: '95%',
msgTarget: 'under'
items: [{
fieldLabel: '...',
name: 'title',
id: 'newtitle',
allowBlank: false
buttons: [{
xtype: 'button',
formBind: true,
text: '...',
handler: function() {
xtype: 'button',
text: '...',
handler: function() {

This produces the right layout, but it isn't a form

9 Jul 2009, 7:05 AM
No, that wouldn't work. Did you look at the examples I pointed you to?

9 Jul 2009, 7:09 AM
The component is either an Ext.Window or an xtype:'form', but it can't be both.

You could try:

var form = new Ext.form.FormPanel({
baseCls: 'x-window',
floating: true,

(but you would be missing some Ext.Window features)

9 Jul 2009, 8:00 AM
Okay i'll just nest the form as an item.. But then I have to be able to disable the buttons, as if formBind worked outside the form

I'll try to check isValid() and if it isn't then disable the button and don't submit

If it works i'll post the code

9 Jul 2009, 8:35 AM
Adding this to the code works as a formbinder

objFormPanel.addListener('clientvalidation',function(objFormPanel,bValid) {
})When I hide the window, to save ressources i use these two