Created
April 26, 2012 19:09
-
-
Save mitchellsimoens/2502066 to your computer and use it in GitHub Desktop.
Quick form example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ext.define('Test.field.Countries', { | |
extend : 'Ext.form.field.ComboBox', | |
alias : 'widget.field-countries', | |
fieldLabel : 'Countries', | |
queryMode : 'local', | |
displayField : 'name', | |
valueField : 'abbr', | |
store : { | |
xclass : 'Ext.data.Store', | |
fields : ['name', 'abbr'], | |
data : [ | |
{ name : 'United States', abbr : 'USA' }, | |
{ name : 'Canada', abbr : 'CAN' }, | |
{ name : 'Mexico', abbr : 'MEX' } | |
] | |
} | |
}); | |
Ext.define('Test.view.form.Address', { | |
extend : 'Ext.container.Container', | |
alias : 'widget.form-address', | |
items : [ | |
{ | |
xtype : 'textfield', | |
fieldLabel : 'City' | |
}, | |
{ | |
xtype : 'field-countries' | |
} | |
] | |
}); | |
Ext.define('Test.view.form.User', { | |
extend : 'Ext.form.FieldSet', | |
alias : 'widget.form-user', | |
title : 'User', | |
items : [ | |
{ | |
xtype : 'textfield', | |
fieldLabel : 'Name', | |
msgTarget : 'side', | |
allowBlank : false, | |
anchor : '-20' | |
} | |
] | |
}); | |
Ext.define('Test.view.MyForm', { | |
extend : 'Ext.form.Panel', | |
alias : 'widget.myform', | |
title : 'Form Example', | |
items : [ | |
{ | |
xtype : 'form-user' | |
}, | |
{ | |
xtype : 'form-address' | |
} | |
] | |
}); | |
Ext.application({ | |
name : 'Test', | |
launch : function() { | |
new Test.view.MyForm({ | |
renderTo : document.body, | |
width : 400, | |
height : 400 | |
}); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks I'll take a deeper look in a few and process it.
Here's one of the shorter 'CMS' forms I just finished. If you take a look at it, I think it probably has an ExtJS3 style to it even though I never used 3. I know 4 supports the MVC model which is what we use for everything else but these have kind of grown organically after we started out with a little bit of example code in the SDK/API docs. Here's the form link
I see there's a book out called ExtJS4 first look, it seemed to touch on some of the things I / we could be doing differently / better. I don't think that this code is:
At all but it does seem to work quite well. I'd love feedback on it, especially with regard to points on where to start learning about applying MVC to something like this.