Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Show off some more advanced form localization

  • Loading branch information...
commit ca70722017ea6ab4475c804374d05542412ac435 1 parent 824d0d1
@sc0ttman sc0ttman authored
View
8 st/locales/en.json
@@ -23,7 +23,13 @@
"loadLocaleMsg" : "Loading..."
},
"fields" : {
- "name" : "Name"
+ "name" : "Name",
+ "dateLabel" : "Date",
+ "datePlaceholder" : "Choose Date"
+ },
+ "fieldsets" : {
+ "title" : "Fieldset Title",
+ "instructions" : "fieldset instructions"
},
"months" : {
"1" : "January",
View
8 st/locales/fr.json
@@ -23,7 +23,13 @@
"loadLocaleMsg" : "Chargement en cours ..."
},
"fields" : {
- "name" : "Nom"
+ "name" : "Nom",
+ "dateLabel" : "la date",
+ "datePlaceholder" : "choisir la date"
+ },
+ "fieldsets" : {
+ "title" : "Ensemble de champs",
+ "instructions" : "des instructions en français"
},
"months" : {
"1" : "Janvier",
View
3  st/mvc/app.js
@@ -18,7 +18,8 @@ Ext.application({
'Ux.locale.override.st.Container',
'Ux.locale.override.st.TitleBar',
'Ux.locale.override.st.field.Field',
- 'Ux.locale.override.st.field.DatePicker',
+ 'Ux.locale.override.st.field.DatePicker',
+ 'Ux.locale.override.st.form.FieldSet',
'Ux.locale.override.st.picker.Picker',
'Ux.locale.override.st.picker.Date'
],
View
4 st/mvc/app.json
@@ -38,7 +38,7 @@
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
- "update": "delta"
+ "update": "all"
}
],
@@ -58,7 +58,7 @@
"css": [
{
"path": "resources/css/app.css",
- "update": "delta"
+ "update": "all"
}
],
View
38 st/mvc/app/view/Main.js
@@ -5,7 +5,8 @@ Ext.define('Locale.view.Main', {
'Ext.tab.Panel',
'Ext.Button',
'Ext.field.Select',
- 'Ext.field.DatePicker'
+ 'Ext.field.DatePicker',
+ 'Ext.form.FieldSet'
],
config: {
@@ -68,12 +69,39 @@ Ext.define('Locale.view.Main', {
locales : {
title : 'tabs.two.title'
},
- items : [
+ items : [
{
- xtype : 'textfield',
+ xtype: 'fieldset',
+ // title: "title",
+ // instruction: "instructions",
locales : {
- label : 'fields.name'
- }
+ title : 'fieldsets.title',
+ instructions: 'fieldsets.instructions'
+ },
+ defaults: {
+ labelWidth: '45%'
+ },
+ items: [
+ {
+ xtype : 'textfield',
+ locales : {
+ label : 'fields.name'
+ }
+ },
+ {
+ xtype : 'datepickerfield',
+ locales : {
+ label : 'fields.dateLabel',
+ placeHolder: 'fields.datePlaceholder',
+ },
+ picker : {
+ enableLocale : true,
+ locales : {
+ months : 'months'
+ }
+ }
+ },
+ ]
}
]
},
View
1  st/mvc/archive/app.js/9cb43da7966f019d274c2e89bd58d65c54a5f98c
1 addition, 0 deletions not shown
View
1  st/mvc/archive/app.js/fd572e96179d3b663d62a046b24e6bb8095474bb
1 addition, 0 deletions not shown
View
8 st/mvc/build/locales/en.json
@@ -23,7 +23,13 @@
"loadLocaleMsg" : "Loading..."
},
"fields" : {
- "name" : "Name"
+ "name" : "Name",
+ "dateLabel" : "Date",
+ "datePlaceholder" : "Choose Date"
+ },
+ "fieldsets" : {
+ "title" : "Fieldset Title",
+ "instructions" : "fieldset instructions"
},
"months" : {
"1" : "January",
View
8 st/mvc/build/locales/fr.json
@@ -23,7 +23,13 @@
"loadLocaleMsg" : "Chargement en cours ..."
},
"fields" : {
- "name" : "Nom"
+ "name" : "Nom",
+ "dateLabel" : "la date",
+ "datePlaceholder" : "choisir la date"
+ },
+ "fieldsets" : {
+ "title" : "Ensemble de champs",
+ "instructions" : "des instructions en français"
},
"months" : {
"1" : "Janvier",
View
2  st/mvc/build/production/app.js
1 addition, 1 deletion not shown
View
2  st/mvc/build/production/app.json
@@ -1 +1 @@
-{"id":"7c5bf3c0-830d-11e1-9f67-e14caa31743a","js":[{"path":"sdk/sencha-touch.js","type":"js","version":"d0eb65bb6ee46add6c4c731b29ff3dbfd26039ce"},{"path":"app.js","bundle":true,"update":"delta","type":"js","version":"366b68cd4376ac498aac915e976afb1b188ca347"}],"css":[{"path":"resources/css/app.css","update":"delta","type":"css","version":"09b5caf1d1319071824911882b7473253753da87"}]}
+{"id":"7c5bf3c0-830d-11e1-9f67-e14caa31743a","js":[{"path":"sdk/sencha-touch.js","type":"js","version":"d0eb65bb6ee46add6c4c731b29ff3dbfd26039ce"},{"path":"app.js","bundle":true,"update":"all","type":"js","version":"fd572e96179d3b663d62a046b24e6bb8095474bb"}],"css":[{"path":"resources/css/app.css","update":"all","type":"css","version":"09b5caf1d1319071824911882b7473253753da87"}]}
View
197 st/mvc/build/testing/app.js
@@ -42439,6 +42439,162 @@ Ext.define('Ux.locale.override.st.TitleBar', {
}
});
/**
+ * @aside guide forms
+ *
+ * A FieldSet is a great way to visually separate elements of a form. It's normally used when you have a form with
+ * fields that can be divided into groups - for example a customer's billing details in one fieldset and their shipping
+ * address in another. A fieldset can be used inside a form or on its own elsewhere in your app. Fieldsets can
+ * optionally have a title at the top and instructions at the bottom. Here's how we might create a FieldSet inside a
+ * form:
+ *
+ * @example
+ * Ext.create('Ext.form.Panel', {
+ * fullscreen: true,
+ * items: [
+ * {
+ * xtype: 'fieldset',
+ * title: 'About You',
+ * instructions: 'Tell us all about yourself',
+ * items: [
+ * {
+ * xtype: 'textfield',
+ * name : 'firstName',
+ * label: 'First Name'
+ * },
+ * {
+ * xtype: 'textfield',
+ * name : 'lastName',
+ * label: 'Last Name'
+ * }
+ * ]
+ * }
+ * ]
+ * });
+ *
+ * Above we created a {@link Ext.form.Panel form} with a fieldset that contains two text fields. In this case, all
+ * of the form fields are in the same fieldset, but for longer forms we may choose to use multiple fieldsets. We also
+ * configured a {@link #title} and {@link #instructions} to give the user more information on filling out the form if
+ * required.
+ */
+Ext.define('Ext.form.FieldSet', {
+ extend : 'Ext.Container',
+ alias : 'widget.fieldset',
+ requires: ['Ext.Title'],
+
+ config: {
+ /**
+ * @cfg
+ * @inheritdoc
+ */
+ baseCls: Ext.baseCSSPrefix + 'form-fieldset',
+
+ /**
+ * @cfg {String} title Optional fieldset title, rendered just above the grouped fields
+ * @accessor
+ */
+ title: null,
+
+ /**
+ * @cfg {String} instructions Optional fieldset instructions, rendered just below the grouped fields
+ * @accessor
+ */
+ instructions: null
+ },
+
+ // @private
+ applyTitle: function(title) {
+ if (typeof title == 'string') {
+ title = {title: title};
+ }
+
+ Ext.applyIf(title, {
+ docked : 'top',
+ baseCls: this.getBaseCls() + '-title'
+ });
+
+ return Ext.factory(title, Ext.Title, this.getTitle());
+ },
+
+ // @private
+ updateTitle: function(newTitle, oldTitle) {
+ if (newTitle) {
+ this.add(newTitle);
+ }
+ if (oldTitle) {
+ this.remove(oldTitle);
+ }
+ },
+
+ // @private
+ applyInstructions: function(instructions) {
+ if (typeof instructions == 'string') {
+ instructions = {title: instructions};
+ }
+
+ Ext.applyIf(instructions, {
+ docked : 'bottom',
+ baseCls: this.getBaseCls() + '-instructions'
+ });
+
+ return Ext.factory(instructions, Ext.Title, this.getInstructions());
+ },
+
+ // @private
+ updateInstructions: function(newInstructions, oldInstructions) {
+ if (newInstructions) {
+ this.add(newInstructions);
+ }
+ if (oldInstructions) {
+ this.remove(oldInstructions);
+ }
+ }
+});
+
+Ext.define('Ux.locale.override.st.form.FieldSet', {
+ override : 'Ext.form.FieldSet',
+
+ requires : [
+ 'Ux.locale.override.st.Component'
+ ],
+
+ setLocale : function(locale) {
+ var me = this,
+ locales = me.locales || me.getInitialConfig().locales,
+ title = locales.title,
+ instructions = locales.instructions,
+ manager = me.locale,
+ defaultText = '',
+ defaultInstructions = '';
+
+ if (title) {
+ if (Ext.isObject(title)) {
+ defaultText = title.defaultText;
+ title = title.key;
+ }
+
+ title = manager.get(title, defaultText);
+
+ if (Ext.isString(title)) {
+ me.setTitle(title);
+ }
+ }
+
+ if (instructions) {
+ if (Ext.isObject(instructions)) {
+ defaultInstructions = instructions.defaultText;
+ instructions = instructions.key;
+ }
+ instructions = manager.get(instructions, defaultInstructions);
+
+ if (Ext.isString(instructions)) {
+ me.setInstructions(instructions);
+ }
+ }
+
+ me.callOverridden(arguments);
+ }
+});
+/**
* Used in the {@link Ext.tab.Bar} component. This shouldn't be used directly, instead use
* {@link Ext.tab.Bar} or {@link Ext.tab.Panel}.
* @private
@@ -48617,7 +48773,8 @@ Ext.define('Locale.view.Main', {
'Ext.tab.Panel',
'Ext.Button',
'Ext.field.Select',
- 'Ext.field.DatePicker'
+ 'Ext.field.DatePicker',
+ 'Ext.form.FieldSet'
],
config: {
@@ -48680,12 +48837,39 @@ Ext.define('Locale.view.Main', {
locales : {
title : 'tabs.two.title'
},
- items : [
+ items : [
{
- xtype : 'textfield',
+ xtype: 'fieldset',
+ // title: "title",
+ // instruction: "instructions",
locales : {
- label : 'fields.name'
- }
+ title : 'fieldsets.title',
+ instructions: 'fieldsets.instructions'
+ },
+ defaults: {
+ labelWidth: '45%'
+ },
+ items: [
+ {
+ xtype : 'textfield',
+ locales : {
+ label : 'fields.name'
+ }
+ },
+ {
+ xtype : 'datepickerfield',
+ locales : {
+ label : 'fields.dateLabel',
+ placeHolder: 'fields.datePlaceholder',
+ },
+ picker : {
+ enableLocale : true,
+ locales : {
+ months : 'months'
+ }
+ }
+ },
+ ]
}
]
},
@@ -48722,7 +48906,8 @@ Ext.application({
'Ux.locale.override.st.Container',
'Ux.locale.override.st.TitleBar',
'Ux.locale.override.st.field.Field',
- 'Ux.locale.override.st.field.DatePicker',
+ 'Ux.locale.override.st.field.DatePicker',
+ 'Ux.locale.override.st.form.FieldSet',
'Ux.locale.override.st.picker.Picker',
'Ux.locale.override.st.picker.Date'
],
View
2  st/mvc/build/testing/app.json
@@ -1 +1 @@
-{"id":"7c5bf3c0-830d-11e1-9f67-e14caa31743a","js":[{"path":"sdk/sencha-touch.js","type":"js"},{"path":"app.js","bundle":true,"update":"delta","type":"js"}],"css":[{"path":"resources/css/app.css","update":"delta","type":"css"}]}
+{"id":"7c5bf3c0-830d-11e1-9f67-e14caa31743a","js":[{"path":"sdk/sencha-touch.js","type":"js"},{"path":"app.js","bundle":true,"update":"all","type":"js"}],"css":[{"path":"resources/css/app.css","update":"all","type":"css"}]}
View
2  st/mvc/build/testing/index.html
@@ -66,7 +66,7 @@
</style>
<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
e;b++)a=d[b],"string"!=typeof a&&(a=a.path),document.write('<script src="'+a+'"><\/script>')}})(this);
-;Ext.blink({"id":"7c5bf3c0-830d-11e1-9f67-e14caa31743a","js":[{"path":"sdk/sencha-touch.js","type":"js"},{"path":"app.js","bundle":true,"update":"delta","type":"js"}],"css":[{"path":"resources/css/app.css","update":"delta","type":"css"}]})</script>
+;Ext.blink({"id":"7c5bf3c0-830d-11e1-9f67-e14caa31743a","js":[{"path":"sdk/sencha-touch.js","type":"js"},{"path":"app.js","bundle":true,"update":"all","type":"js"}],"css":[{"path":"resources/css/app.css","update":"all","type":"css"}]})</script>
</head>
<body>
<div id="appLoadingIndicator">
Please sign in to comment.
Something went wrong with that request. Please try again.