February 21, 2010

Patch for extjs ItemSelector

At work, extjs was the first javascript library we used. It provides very nice UI and probably has the best documentation and forum support available among other similar libraries. We modified its code to provide legend support which is nothing but title in the custom ItemSelector ui element. Below is the patch(not a big deal but i didn't want to loose this change so thought to post here).

### Eclipse Workspace Patch 1.0
Index: webcontent/ext-3.0.0/examples/ux/ItemSelector.js
===================================================================
--- webcontent/ext-3.0.0/examples/ux/ItemSelector.js (revision 230)
+++ webcontent/ext-3.0.0/examples/ux/ItemSelector.js (working copy)
@@ -41,6 +41,8 @@
     delimiter:',',
     bodyStyle:null,
     border:false,
+    legendFrom: 'Available',
+    legentTo: 'Selected',
     defaultAutoCreate:{tag: "div"},
     /**
      * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
@@ -60,17 +62,17 @@
 
         // Internal default configuration for both multiselects
         var msConfig = [{
-            legend: 'Available',
+            legend: (this.legendFrom || 'Available'),
             draggable: true,
             droppable: true,
-            width: 100,
-            height: 100
+            autoWidth: true,
+            autoHeight: true
         },{
-            legend: 'Selected',
+            legend: (this.legendTo || 'Selected'),
             droppable: true,
             draggable: true,
-            width: 100,
-            height: 100
+            autoWidth: true,
+            autoHeight: true
         }];
 
         this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));

And the result looks something like below

No comments: