Ext.ux.form.field.BoxSelect extends Ext.form.field.ComboBox to +
Ext.ux.boxselect.BoxSelect extends Ext.form.field.ComboBox to provide a more 'multiSelect'-friendly control. The careful efforts made in this extension enable most (if not all) of the ComboBox examples to convert to BoxSelects easily. The examples included here showcase the differences between the default control and this extension, provide general information about advanced usage diff --git a/examples/boxselect.js b/examples/boxselect.js index 882a96d..63b1096 100644 --- a/examples/boxselect.js +++ b/examples/boxselect.js @@ -1,13 +1,13 @@ /* -This file contains example usages of the Ext.ux.form.field.BoxSelect component, and is based on the +This file contains example usages of the Ext.ux.boxselect.BoxSelect component, and is based on the examples of comboboxes provided in Ext JS 4. */ Ext.USE_NATIVE_JSON = false; Ext.require([ - 'Ext.ux.form.field.BoxSelect' + 'Ext.ux.boxselect.BoxSelect' ]); Ext.onReady(function() { @@ -55,7 +55,7 @@ Ext.onReady(function() { var addExampleSelect = function(config, renderTo) { var fieldCfg = Ext.applyIf(config, baseExampleConfig); - var fieldCmp = Ext.create('Ext.ux.form.field.BoxSelect', Ext.applyIf({ + var fieldCmp = Ext.create('Ext.ux.boxselect.BoxSelect', Ext.applyIf({ renderTo: renderTo }, fieldCfg)); createShowConfigButton(fieldCfg, fieldCmp); diff --git a/src/BoxSelect.js b/src/BoxSelect.js index 7060292..f41bba6 100644 --- a/src/BoxSelect.js +++ b/src/BoxSelect.js @@ -29,9 +29,10 @@ * @xtype boxselect * */ -Ext.define('Ext.ux.form.field.BoxSelect', { +Ext.define('Ext.ux.boxselect.BoxSelect', { extend:'Ext.form.field.ComboBox', alias: ['widget.comboboxselect', 'widget.boxselect'], + uses: ['Ext.ux.boxselect.BoxSelectField'], requires: ['Ext.selection.Model', 'Ext.data.Store'], // @@ -1591,71 +1592,4 @@ Ext.define('Ext.ux.form.field.BoxSelect', { } } } -}); - -/** - * Ensures the input element takes up the maximum amount of remaining list width, - * or the entirety of the list width if too little space remains. In this case, - * the list height will be automatically increased to accomodate the new line. This - * growth will not occur if {@link Ext.ux.form.field.BoxSelect#multiSelect} or - * {@link Ext.ux.form.field.BoxSelect#grow} is false. - */ -Ext.define('Ext.ux.layout.component.field.BoxSelectField', { - /* Begin Definitions */ - alias: ['layout.boxselectfield'], - extend: 'Ext.layout.component.field.Trigger', - - /* End Definitions */ - - type: 'boxselectfield', - - /*For proper calculations we need our field to be sized.*/ - waitForOuterWidthInDom:true, - - beginLayout: function(ownerContext) { - var me = this, - owner = me.owner; - - me.callParent(arguments); - - ownerContext.inputElCtContext = ownerContext.getEl('inputElCt'); - owner.inputElCt.setStyle('width',''); - - me.skipInputGrowth = !owner.grow || !owner.multiSelect; - }, - - beginLayoutFixed: function(ownerContext, width, suffix) { - var me = this, - owner = ownerContext.target; - - owner.triggerEl.setStyle('height', '24px'); - - me.callParent(arguments); - - if (ownerContext.heightModel.fixed && ownerContext.lastBox) { - owner.listWrapper.setStyle('height', ownerContext.lastBox.height+'px'); - owner.itemList.setStyle('height', '100%'); - } - /*No inputElCt calculations here!*/ - }, - - /*Calculate and cache value of input container.*/ - publishInnerWidth:function(ownerContext) { - var me = this, - owner = me.owner, - width = owner.itemList.getWidth(true) - 10, - lastEntry = owner.inputElCt.prev(null, true); - - if (lastEntry && !owner.stacked) { - lastEntry = Ext.fly(lastEntry); - width = width - lastEntry.getOffsetsTo(lastEntry.up(''))[0] - lastEntry.getWidth(); - } - - if (!me.skipInputGrowth && (width < 35)) { - width = width - 10; - } else if (width < 1) { - width = 1; - } - ownerContext.inputElCtContext.setWidth(width); - } -}); +}); \ No newline at end of file diff --git a/src/BoxSelectField.js b/src/BoxSelectField.js new file mode 100644 index 0000000..f78ea59 --- /dev/null +++ b/src/BoxSelectField.js @@ -0,0 +1,66 @@ +/** + * Ensures the input element takes up the maximum amount of remaining list width, + * or the entirety of the list width if too little space remains. In this case, + * the list height will be automatically increased to accomodate the new line. This + * growth will not occur if {@link Ext.ux.form.field.BoxSelect#multiSelect} or + * {@link Ext.ux.form.field.BoxSelect#grow} is false. + */ +Ext.define('Ext.ux.boxselect.BoxSelectField', { + /* Begin Definitions */ + alias: ['layout.boxselectfield'], + extend: 'Ext.layout.component.field.Trigger', + + /* End Definitions */ + + type: 'boxselectfield', + + /*For proper calculations we need our field to be sized.*/ + waitForOuterWidthInDom:true, + + beginLayout: function(ownerContext) { + var me = this, + owner = me.owner; + + me.callParent(arguments); + + ownerContext.inputElCtContext = ownerContext.getEl('inputElCt'); + owner.inputElCt.setStyle('width',''); + + me.skipInputGrowth = !owner.grow || !owner.multiSelect; + }, + + beginLayoutFixed: function(ownerContext, width, suffix) { + var me = this, + owner = ownerContext.target; + + owner.triggerEl.setStyle('height', '24px'); + + me.callParent(arguments); + + if (ownerContext.heightModel.fixed && ownerContext.lastBox) { + owner.listWrapper.setStyle('height', ownerContext.lastBox.height+'px'); + owner.itemList.setStyle('height', '100%'); + } + /*No inputElCt calculations here!*/ + }, + + /*Calculate and cache value of input container.*/ + publishInnerWidth:function(ownerContext) { + var me = this, + owner = me.owner, + width = owner.itemList.getWidth(true) - 10, + lastEntry = owner.inputElCt.prev(null, true); + + if (lastEntry && !owner.stacked) { + lastEntry = Ext.fly(lastEntry); + width = width - lastEntry.getOffsetsTo(lastEntry.up(''))[0] - lastEntry.getWidth(); + } + + if (!me.skipInputGrowth && (width < 35)) { + width = width - 10; + } else if (width < 1) { + width = 1; + } + ownerContext.inputElCtContext.setWidth(width); + } +});