]);
Ext.onReady(function(){
+
+ function createDockedItems(fieldId) {
+ return [{
+ xtype: 'toolbar',
+ dock: 'top',
+ items: {
+ text: 'Options',
+ menu: [{
+ text: 'Set value (2,3)',
+ handler: function(){
+ Ext.getCmp(fieldId).setValue(['2', '3']);
+ }
+ },{
+ text: 'Toggle enabled',
+ checked: true,
+ checkHandler: function(item, checked){
+ Ext.getCmp(fieldId).setDisabled(!checked);
+ }
+ },{
+ text: 'Toggle delimiter',
+ checked: true,
+ checkHandler: function(item, checked) {
+ var field = Ext.getCmp(fieldId);
+ if (checked) {
+ field.delimiter = ',';
+ Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
+ 'see that values are now submitted as a single parameter separated by the delimiter.');
+ } else {
+ field.delimiter = null;
+ Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
+ 'see that values are now submitted as separate parameters.');
+ }
+ }
+ }]
+ }
+ }, {
+ xtype: 'toolbar',
+ dock: 'bottom',
+ ui: 'footer',
+ defaults: {
+ minWidth: 75
+ },
+ items: ['->', {
+ text: 'Clear',
+ handler: function(){
+ var field = Ext.getCmp(fieldId);
+ if (!field.readOnly && !field.disabled) {
+ field.clearValue();
+ }
+ }
+ }, {
+ text: 'Reset',
+ handler: function() {
+ Ext.getCmp(fieldId).up('form').getForm().reset();
+ }
+ }, {
+ text: 'Save',
+ handler: function(){
+ var form = Ext.getCmp(fieldId).up('form').getForm();
+ if (form.isValid()){
+ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
+ form.getValues(true));
+ }
+ }
+ }]
+ }];
+ }
/*
* Ext.ux.form.MultiSelect Example Code
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
-
+ id: 'multiselect-field',
allowBlank: false,
- // minSelections: 2,
- // maxSelections: 3,
-
store: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
-
value: ['3', '4', '6'],
-
ddReorder: true
}],
-
- tbar:[{
- text: 'Options',
- menu: [{
- text: 'Set value (2,3)',
- handler: function(){
- msForm.getForm().findField('multiselect').setValue(['2', '3']);
- }
- },{
- text: 'Toggle enabled',
- handler: function(){
- var m = msForm.getForm().findField('multiselect');
- if (!m.disabled) {
- m.disable();
- } else {
- m.enable();
- }
- }
- },{
- text: 'Toggle delimiter',
- handler: function() {
- var m = msForm.getForm().findField('multiselect');
- if (m.delimiter) {
- m.delimiter = null;
- Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
- 'see that values are now submitted as separate parameters.');
- } else {
- m.delimiter = ',';
- Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
- 'see that values are now submitted as a single parameter separated by the delimiter.');
- }
- }
- }]
- }],
-
- buttons: [{
- text: 'Clear',
- handler: function(){
- var field = msForm.getForm().findField('multiselect');
- if (!field.readOnly && !field.disabled) {
- field.clearValue();
- }
- }
- }, {
- text: 'Reset',
- handler: function() {
- msForm.getForm().reset();
- }
- }, {
- text: 'Save',
- handler: function(){
- if(msForm.getForm().isValid()){
- Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
- msForm.getForm().getValues(true));
- }
- }
- }]
+ dockedItems: createDockedItems('multiselect-field')
});
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',
-
- tbar:[{
- text: 'Options',
- menu: [{
- text: 'Set value (2,3)',
- handler: function(){
- isForm.getForm().findField('itemselector').setValue(['2', '3']);
- }
- },{
- text: 'Toggle enabled',
- handler: function(){
- var m = isForm.getForm().findField('itemselector');
- if (!m.disabled) {
- m.disable();
- } else {
- m.enable();
- }
- }
- },{
- text: 'Toggle delimiter',
- handler: function() {
- var m = isForm.getForm().findField('itemselector');
- if (m.delimiter) {
- m.delimiter = null;
- Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
- 'see that values are now submitted as separate parameters.');
- } else {
- m.delimiter = ',';
- Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
- 'see that values are now submitted as a single parameter separated by the delimiter.');
- }
- }
- }]
- }],
-
items:[{
xtype: 'itemselector',
name: 'itemselector',
+ id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
-
store: ds,
displayField: 'text',
valueField: 'value',
value: ['3', '4', '6'],
-
allowBlank: false,
- // minSelections: 2,
- // maxSelections: 3,
msgTarget: 'side'
}],
-
- buttons: [{
- text: 'Clear',
- handler: function(){
- var field = isForm.getForm().findField('itemselector');
- if (!field.readOnly && !field.disabled) {
- field.clearValue();
- }
- }
- }, {
- text: 'Reset',
- handler: function() {
- isForm.getForm().reset();
- }
- }, {
- text: 'Save',
- handler: function(){
- if(isForm.getForm().isValid()){
- Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
- isForm.getForm().getValues(true));
- }
- }
- }]
+ dockedItems: createDockedItems('itemselector-field')
});
});