Ext.ux.itemselector 使用

MultiSelect.js

ItemSelector.js

MultiSelect.css

Ext.onReady(function(){
   
 var roledata1;
 var rollBack1 = function(data) {
  roledata1 = eval(data);
 };
 test.getRoledata1( {
  callback : rollBack1,
  async : false
 });
 var roledata2;
 var rollBack2 = function(data) {
  roledata2 = eval(data);
 };
 test.getRoledata2( {
  callback : rollBack2,
  async : false
 });
  var panel = new Ext.Panel({  
          //width: bodyWidth-180,  
          title : "用户角色",
    width : 530,
    height : 220,
    colspan : 2,
    items : [ {
     xtype : "itemselector",
     id : "AppUserRoles",
     name : "AppUserRoles",
     fromLegend : "",
     imagePath :"/images/images/",
     multiselects : [
       {
        id : "chooseRoles",
        title : "可选角色",
        width : 247,
        height : 190,
        store : new Ext.data.SimpleStore( {
           fields : [ "roleId", "roleName" ],
           data : roledata1
          }),
        displayField : "roleName",
        valueField : "roleId"
       },
       {
        id : "selectedRoles",
        name : "selectedRoles",
        title : "已有角色",
        width : 247,
        height : 190,
        store : new Ext.data.SimpleStore( {
         fields : [ "roleId", "roleName" ],
         data : roledata2
        }),
        displayField : "roleName",
        valueField : "roleId"
       } ]
    } ]
      }); 
  var f = new Ext.form.FormPanel({
   method:"post",
   style:"padding:10px,10px,10px",
   frame:true,
   monitorValid:true,
   labelWidth:80,//文本信息宽度
   labelAlign:"right", //对其方式
   autoHeight:true,   //自动设置高度
   autoWidth:true,
   items:[panel],
   buttonAlign :'center',
   buttons:[
            {
    text : "清除所选",
    iconCls:'remove',
    handler : removeAuthority
             },
            {
    text : '确定',
    formBind : true,
    iconCls:'sure',
    handler : function() {
    win.getEl().mask('处理中....');
     f.form
       .doAction(
         'submit',
         {
          url : contextPath + '/test.htm?method=saveAuthority',
          method : 'post',
          success : function(form,
            action) {
           var data = Ext
             .decode(action.response.responseText);
           Ext.MessageBox
             .show( {
              title : data.success ? '成功'
                : '失败',
              msg : data==undefined?'请求超时!':data.msg,
              buttons : Ext.MessageBox.OK,
              icon : data.success ? Ext.MessageBox.INFO
                : Ext.MessageBox.ERROR,
              fn : function() {
              }
             });
           win.getEl().unmask();
           //重置form
           removeAuthority();
          },
          failure : function(form,
            action) {
           var data = Ext
             .decode(action.response.responseText);
           Ext.MessageBox
             .show( {
              title : '错误',
              msg : '网络连接失败！',
              buttons : Ext.MessageBox.OK,
              icon : Ext.MessageBox.ERROR
             });
           win.getEl().unmask();
          }
         });
    }
   }]
  }); 
  function removeAuthority(){
   f.getForm().findField("AppUserRoles").reset();
            }
   win = new Ext.Window({
     height : 330,
     width : 590,
     resizable : false,
     title : "管理员密码重置",
     modal : true,
     constrain : false,
     draggable:false,
     constrainHeader : false,
     stateful : true,
     autoScroll : true,
     closable : true,
     border : true,
     layout : 'fit'
    }); 
  win.add(f);
  win.doLayout();
  win.show();
  Ext.QuickTips.init();
});