kveeiv · gabeattack · Dec 11, 2012
diff --git a/examples/boxselect.html b/examples/boxselect.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-    <title>Ext.ux.form.field.BoxSelect</title>
+    <title>Ext.ux.boxselect.BoxSelect</title>
 
     <!-- ExtJS from CDN -->
     <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/extjs-4.1.1-gpl/resources/css/ext-all.css">
@@ -19,6 +19,7 @@
     <!-- BoxSelect Source -->
     <link rel="stylesheet" type="text/css" href="../src/BoxSelect.css" />
     <script type="text/javascript" src="../src/BoxSelect.js"></script>
+    <script type="text/javascript" src="../src/BoxSelectField.js"></script>
 
     <!-- Example -->
     <script type="text/javascript" src="boxselect-data.js"></script>
@@ -95,8 +96,8 @@
 
 </head>
 <body>
-<h1>Ext.ux.form.field.BoxSelect Examples and Reference</h1>
-<p>Ext.ux.form.field.BoxSelect extends <a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox">Ext.form.field.ComboBox</a> to
+<h1>Ext.boxselect.BoxSelect Examples and Reference</h1>
+<p>Ext.ux.boxselect.BoxSelect extends <a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox">Ext.form.field.ComboBox</a> to
 provide a more 'multiSelect'-friendly control. The careful efforts made in this extension enable most (if not all) of the
 <a href="http://docs.sencha.com/ext-js/4-1/#!/example/form/combos.html">ComboBox examples</a> 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
@@ -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
@@ -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);
-    }
-});
+});
diff --git a/src/BoxSelectField.js 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);
+    }
+});