X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/examples/form/composite-field.js..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/form/fieldcontainer.js
diff --git a/examples/form/composite-field.js b/examples/form/fieldcontainer.js
similarity index 58%
rename from examples/form/composite-field.js
rename to examples/form/fieldcontainer.js
index 1bae3124..4da2faed 100644
--- a/examples/form/composite-field.js
+++ b/examples/form/fieldcontainer.js
@@ -1,45 +1,71 @@
-/*!
- * 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.tip.QuickTipManager'
+]);
+
Ext.onReady(function() {
Ext.QuickTips.init();
-
- var form = new Ext.form.FormPanel({
+
+ Ext.define('Employee', {
+ extend: 'Ext.data.Model',
+ fields: [
+ {name: 'email', type: 'string'},
+ {name: 'title', type: 'string'},
+ {name: 'firstName', type: 'string'},
+ {name: 'lastName', type: 'string'},
+ {name: 'phone-1', type: 'string'},
+ {name: 'phone-2', type: 'string'},
+ {name: 'phone-3', type: 'string'},
+ {name: 'hours', type: 'number'},
+ {name: 'minutes', type: 'number'},
+ {name: 'startDate', type: 'date'},
+ {name: 'endDate', type: 'date'}
+ ]
+ });
+
+ var form = Ext.create('Ext.form.Panel', {
renderTo: 'docbody',
- title : 'Composite Fields',
+ title : 'FieldContainers',
autoHeight: true,
width : 600,
-
- bodyStyle: 'padding: 5px',
+ bodyPadding: 10,
defaults: {
- anchor: '0'
+ anchor: '100%',
+ labelWidth: 100
},
items : [
{
xtype : 'textfield',
name : 'email',
fieldLabel: 'Email Address',
- anchor : '-20'
+ vtype: 'email',
+ msgTarget: 'side',
+ allowBlank: false
},
{
- xtype: 'compositefield',
+ xtype: 'fieldcontainer',
fieldLabel: 'Date Range',
+ combineErrors: true,
msgTarget : 'side',
- anchor : '-20',
+ layout: 'hbox',
defaults: {
- flex: 1
+ flex: 1,
+ hideLabel: true
},
items: [
{
- xtype: 'datefield',
- name : 'startDate'
+ xtype : 'datefield',
+ name : 'startDate',
+ fieldLabel: 'Start',
+ margin: '0 5 0 0',
+ allowBlank: false
},
{
- xtype: 'datefield',
- name : 'endDate'
+ xtype : 'datefield',
+ name : 'endDate',
+ fieldLabel: 'End',
+ allowBlank: false
}
]
},
@@ -47,25 +73,39 @@ Ext.onReady(function() {
xtype: 'fieldset',
title: 'Details',
collapsible: true,
+ defaults: {
+ labelWidth: 89,
+ anchor: '100%',
+ layout: {
+ type: 'hbox',
+ defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
+ }
+ },
items: [
{
- xtype: 'compositefield',
+ xtype: 'fieldcontainer',
fieldLabel: 'Phone',
- // anchor : '-20',
- // anchor : null,
+ combineErrors: true,
msgTarget: 'under',
+ defaults: {
+ hideLabel: true
+ },
items: [
{xtype: 'displayfield', value: '('},
- {xtype: 'textfield', name: 'phone-1', width: 29, allowBlank: false},
+ {xtype: 'textfield', fieldLabel: 'Phone 1', name: 'phone-1', width: 29, allowBlank: false},
{xtype: 'displayfield', value: ')'},
- {xtype: 'textfield', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
- {xtype: 'textfield', name: 'phone-3', width: 48, allowBlank: false}
+ {xtype: 'textfield', fieldLabel: 'Phone 2', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
+ {xtype: 'displayfield', value: '-'},
+ {xtype: 'textfield', fieldLabel: 'Phone 3', name: 'phone-3', width: 48, allowBlank: false}
]
},
{
- xtype: 'compositefield',
+ xtype: 'fieldcontainer',
fieldLabel: 'Time worked',
combineErrors: false,
+ defaults: {
+ hideLabel: true
+ },
items: [
{
name : 'hours',
@@ -90,17 +130,19 @@ Ext.onReady(function() {
]
},
{
- xtype : 'compositefield',
- anchor: '-20',
+ xtype : 'fieldcontainer',
+ combineErrors: true,
msgTarget: 'side',
fieldLabel: 'Full Name',
+ defaults: {
+ hideLabel: true
+ },
items : [
{
//the width of this field in the HBox layout is set directly
//the other 2 items are given flex: 1, so will share the rest of the space
width: 50,
-
xtype: 'combo',
mode: 'local',
value: 'mrs',
@@ -109,10 +151,10 @@ Ext.onReady(function() {
editable: false,
fieldLabel: 'Title',
name: 'title',
- hiddenName: 'title',
displayField: 'name',
valueField: 'value',
- store: new Ext.data.JsonStore({
+ queryMode: 'local',
+ store: Ext.create('Ext.data.Store', {
fields : ['name', 'value'],
data : [
{name : 'Mr', value: 'mr'},
@@ -133,7 +175,8 @@ Ext.onReady(function() {
flex : 1,
name : 'lastName',
fieldLabel: 'Last',
- allowBlank: false
+ allowBlank: false,
+ margins: '0'
}
]
}
@@ -144,22 +187,8 @@ Ext.onReady(function() {
{
text : 'Load test data',
handler: function() {
- var Record = Ext.data.Record.create([
- {name: 'email', type: 'string'},
- {name: 'title', type: 'string'},
- {name: 'firstName', type: 'string'},
- {name: 'lastName', type: 'string'},
- {name: 'phone-1', type: 'string'},
- {name: 'phone-2', type: 'string'},
- {name: 'phone-3', type: 'string'},
- {name: 'hours', type: 'number'},
- {name: 'minutes', type: 'number'},
- {name: 'startDate', type: 'date'},
- {name: 'endDate', type: 'date'}
- ]);
-
- form.form.loadRecord(new Record({
- 'email' : 'ed@extjs.com',
+ this.up('form').getForm().loadRecord(Ext.ModelManager.create({
+ 'email' : 'abe@sencha.com',
'title' : 'mr',
'firstName': 'Abraham',
'lastName' : 'Elias',
@@ -170,30 +199,30 @@ Ext.onReady(function() {
'phone-3' : '4567',
'hours' : 7,
'minutes' : 15
- }));
+ }, 'Employee'));
}
},
{
text : 'Save',
handler: function() {
- if (form.form.isValid()) {
- var s = '';
-
- Ext.iterate(form.form.getValues(), function(key, value) {
- s += String.format("{0} = {1}
", key, value);
+ var form = this.up('form').getForm(),
+ s = '';
+ if (form.isValid()) {
+ Ext.iterate(form.getValues(), function(key, value) {
+ s += Ext.util.Format.format("{0} = {1}
", key, value);
}, this);
-
- Ext.example.msg('Form Values', s);
+
+ Ext.Msg.alert('Form Values', s);
}
}
},
-
+
{
text : 'Reset',
handler: function() {
- form.form.reset();
+ this.up('form').getForm().reset();
}
}
]
});
-});
\ No newline at end of file
+});