-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require([
+ 'Ext.form.*',
+ 'Ext.data.*'
+]);
+
Ext.onReady(function(){
- Ext.QuickTips.init();
+ Ext.define('example.contact', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'first', mapping: 'name > first'},
+ {name: 'last', mapping: 'name > last'},
+ 'company', 'email', 'state',
+ {name: 'dob', type: 'date', dateFormat: 'm/d/Y'}
+ ]
+ });
- // turn on validation errors beside the field globally
- Ext.form.Field.prototype.msgTarget = 'side';
+ Ext.define('example.fielderror', {
+ extend: 'Ext.data.Model',
+ fields: ['id', 'msg']
+ });
- var fs = new Ext.FormPanel({
+ var formPanel = Ext.create('Ext.form.Panel', {
+ renderTo: 'form-ct',
frame: true,
title:'XML Form',
- labelAlign: 'right',
- labelWidth: 85,
- width:340,
+ width: 340,
+ bodyPadding: 5,
waitMsgTarget: true,
- // configure how to read the XML Data
- reader : new Ext.data.XmlReader({
- record : 'contact',
- success: '@success'
- }, [
- {name: 'first', mapping:'name/first'}, // custom mapping
- {name: 'last', mapping:'name/last'},
- 'company', 'email', 'state',
- {name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
- ]),
+ fieldDefaults: {
+ labelAlign: 'right',
+ labelWidth: 85,
+ msgTarget: 'side'
+ },
- // reusable eror reader class defined at the end of this file
- errorReader: new Ext.form.XmlErrorReader(),
+ // configure how to read the XML data
+ reader : Ext.create('Ext.data.reader.Xml', {
+ model: 'example.contact',
+ record : 'contact',
+ successProperty: '@success'
+ }),
- items: [
- new Ext.form.FieldSet({
- title: 'Contact Information',
- autoHeight: true,
- defaultType: 'textfield',
- items: [{
- fieldLabel: 'First Name',
- emptyText: 'First Name',
- name: 'first',
- width:190
- }, {
- fieldLabel: 'Last Name',
- emptyText: 'Last Name',
- name: 'last',
- width:190
- }, {
- fieldLabel: 'Company',
- name: 'company',
- width:190
- }, {
- fieldLabel: 'Email',
- name: 'email',
- vtype:'email',
- width:190
- },
+ // configure how to read the XML errors
+ errorReader: Ext.create('Ext.data.reader.Xml', {
+ model: 'example.fielderror',
+ record : 'field',
+ successProperty: '@success'
+ }),
- new Ext.form.ComboBox({
- fieldLabel: 'State',
- hiddenName:'state',
- store: new Ext.data.ArrayStore({
- fields: ['abbr', 'state'],
- data : Ext.exampledata.states // from states.js
- }),
- valueField:'abbr',
- displayField:'state',
- typeAhead: true,
- mode: 'local',
- triggerAction: 'all',
- emptyText:'Select a state...',
- selectOnFocus:true,
- width:190
+ items: [{
+ xtype: 'fieldset',
+ title: 'Contact Information',
+ defaultType: 'textfield',
+ defaults: {
+ width: 280
+ },
+ items: [{
+ fieldLabel: 'First Name',
+ emptyText: 'First Name',
+ name: 'first'
+ }, {
+ fieldLabel: 'Last Name',
+ emptyText: 'Last Name',
+ name: 'last'
+ }, {
+ fieldLabel: 'Company',
+ name: 'company'
+ }, {
+ fieldLabel: 'Email',
+ name: 'email',
+ vtype:'email'
+ }, {
+ xtype: 'combobox',
+ fieldLabel: 'State',
+ name: 'state',
+ store: Ext.create('Ext.data.ArrayStore', {
+ fields: ['abbr', 'state'],
+ data : Ext.example.states // from states.js
}),
+ valueField: 'abbr',
+ displayField: 'state',
+ typeAhead: true,
+ queryMode: 'local',
+ emptyText: 'Select a state...'
+ }, {
+ xtype: 'datefield',
+ fieldLabel: 'Date of Birth',
+ name: 'dob',
+ allowBlank: false
+ }
+ ]
+ }],
- new Ext.form.DateField({
- fieldLabel: 'Date of Birth',
- name: 'dob',
- width:190,
- allowBlank:false
- })
- ]
- })
- ]
- });
-
- // simple button add
- fs.addButton('Load', function(){
- fs.getForm().load({url:'xml-form.xml', waitMsg:'Loading'});
- });
-
- // explicit add
- var submit = fs.addButton({
- text: 'Submit',
- disabled:true,
- handler: function(){
- fs.getForm().submit({url:'xml-errors.xml', waitMsg:'Saving Data...', submitEmptyText: false});
- }
- });
-
- fs.render('form-ct');
-
- fs.on({
- actioncomplete: function(form, action){
- if(action.type == 'load'){
- submit.enable();
+ buttons: [{
+ text: 'Load',
+ handler: function(){
+ formPanel.getForm().load({
+ url: 'xml-form-data.xml',
+ waitMsg: 'Loading...'
+ });
+ }
+ }, {
+ text: 'Submit',
+ disabled: true,
+ formBind: true,
+ handler: function(){
+ this.up('form').getForm().submit({
+ url: 'xml-form-errors.xml',
+ submitEmptyText: false,
+ waitMsg: 'Saving Data...'
+ });
}
- }
+ }]
});
});
-
-// A reusable error reader class for XML forms
-Ext.form.XmlErrorReader = function(){
- Ext.form.XmlErrorReader.superclass.constructor.call(this, {
- record : 'field',
- success: '@success'
- }, [
- 'id', 'msg'
- ]
- );
-};
-Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff