ExtJS - Selector

 

srp.popups.createSelctorWin = function(url, module){
 
 var lStore = new Ext.data.Store({ 
  autoLoad: true,
  url: url,
  reader : new Ext.data.JsonReader({
   root: 'list'
  },[
   {name:"value", mapping: 'VALUE'},
   {name:"text", mapping: 'TEXT'}
  ])
 }); 
 
 var rStore = new Ext.data.Store({ 
  reader : new Ext.data.ArrayReader({},[
   {name:"value", mapping: 'value'},
   {name:"text", mapping: 'text'}
  ])
 });
 
 var itemSelector = new Ext.ux.form.ItemSelector({
  name: 'itemselector1',
  fieldLabel: 'ItemSelector',
  multiselects: [{
   width: 150,
   height:350,
   store: lStore,
   displayField: 'text',
   valueField: 'value',
   tbar : [{
    xtype : 'textfield',
    enableKeyEvents: true,
    listeners : {
     'keyup': {
      fn: function() {
       var value = this.getValue();
       value = Ext.isEmpty(value) ? '' : value;
       lStore.filter('text',value);
      },
      delay: 100
     }
    }
   }]
  },{
   width: 150,
   height: 350,
   store: rStore,
   displayField: 'text',
   valueField: 'value',
   tbar:[{
    text: 'reset',
    iconCls: 'button-reset',
    handler:function(){
     rStore.loadData([]);
    }
   }]
  }]
 });
 
 var win = new Ext.Window({
  title : "Selector",
  bodyStyle : 'padding: 6px;',
  width : 370,
  autoHeight : true,
  items: [itemSelector],
  bbar: [{   
   text : 'Cancel',
   iconCls : 'button-cancel',
   handler : function() {
    win.hide();
   }
  },'->',{
   text : 'OK',
   iconCls : 'button-ok',
   handler : function() {  
    var recs = rStore.getRange();
    var n = recs.length;
    if(n>0){
     var arr = [];
     for(var i=0; i<n; i++){
      var ar = {};
      ar.productid = recs[i].data.text;
      arr.push(ar);
     }
     module.store.loadData(arr, true);
     win.hide();
    }else{
     //Ext.Msg.alert("Message", "");
    }
   }
  }]
 });
 
 win.show();
 
}