Extjs4 itemselector 的用法

• 最近做个关于组织和人员的选择的控件，先是在网上找了很多例子，但是都不能打到功能需求最后就看了extjs官方的例子http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/multiselect/multiselect-demo.js。参照这个写出了个自己的。上图

  

• 这个是引的js文件，这里要有顺序的引入

• 

  <script type="text/javascript" src="scripts/ext-extend.js"></script>    
  <script type="text/javascript" src="extjs4/ux/form/MultiSelect.js" ></script>    
  <script type="text/javascript" src="extjs4/ux/form/ItemSelector.js" ></script>    
  <script type="text/javascript" src="extjs4/ux/ajax/JsonSimlet.js" ></script>    
  <script type="text/javascript" src="extjs4/ux/ajax/SimManager.js" ></script>

  View Code
• 这个代码基本是官网的源码
• 

  function createDockedItems(fieldId) {                  
              return [{                  
                  xtype: 'toolbar',                  
                  dock: 'bottom',                  
                  ui: 'footer',                  
                  defaults: {                  
                      minWidth: 75
                  },                  
                  items: ['->', {                  
                      text: '保存',                  
                      handler: function() {                  
                          var form = Ext.getCmp(fieldId).up('form').getForm();                  
                          var records = Ext.getCmp(fieldId).toField.store.getRange();                  
                          var names = [];                  
                          var ids = [];                  
                          for (var i = 0; i < records.length; i++) {                  
                              names.push(records[i].get('cname'));                  
                              ids.push(records[i].get('id'));                  
                          }                  
                          if (form.isValid()) {                  
                              noticeNewForm.getForm().findField('receiverName').setValue(names.join(','))                  
                              noticeNewForm.getForm().findField('receiverId').setValue(ids.join(','));                  
                              selectorWindow.hide();                  
                          }                  
                      }                  
                  }, {                  
                      text: '重置',                  
                      handler: function() {                  
                          Ext.getCmp(fieldId).up('form').getForm().reset();                  
                      }                  
                  }, {                  
                      text: '清空',                  
                      handler: function() {                  
                          var field = Ext.getCmp(fieldId);                  
                          if (!field.disabled) {                  
                              field.clearValue();                  
                          }                  
                      }                  
                  }]                  
              }];                  
          }

  View Code
• 这个是得到store的数据，官方的是array，但是我们一般的都是josn。所以我做了自己的修改。在这当中遇到一个问题就是在后台得到了数据，但是不能放进itemselector里面，找了半天，原来是要写个model。这个model也相当于fields: ['id','cname']。
• 

  var ds = Ext.create('Ext.data.Store', {           
              model: 'sm.User',           
              proxy: {           
                  type: 'ajax',           
                  url: 'sm/user/pageExt.do',           
                  reader: {           
                      type: 'json',           
                      root: 'root',           
                      totalProperty: 'totalProperty'
                  }           
              },           
              autoDestroy: true,           
              autoLoad: false,           
              sortInfo: {           
                  field: 'id',           
                  direction: 'ASC'
              },           
              listeners: {           
                  beforeload: function(store) {           
                      var record = sm_org_tree.getSelectionModel().getSelection();           
                      if (record.length == 1) {           
                          //    store.proxy.extraParams.smOrgId = record[0].get('id');           
                      }           
                  }           
              }           
          });

  View Code
• 这个是tree的代码，这个可以根据自己的要求换就行了。这 里也出现了一个问题就是当你selectionchange的时候中间的人员容器里面是叠加上去的调用clearValue()方法也是没用（这个问题纠 结了半天，后来查原因是查看源码MultiSelect.js里面clearValue()方法被调用前自动把以前的data赋值给刷新后的store 了），后来让项目组的前辈看了下，修改了ItemSelector.js 加了句fromStore.removeAll();就能实现动态加载不叠加的 情况了
• 

  populateFromStore: function(store) {     
      var fromStore = this.fromField.store;     
                 
      // Flag set when the fromStore has been loaded     
      this.fromStorePopulated = true;     
      //clear fromStore data     
      fromStore.removeAll();     
      fromStore.add(store.getRange());      
             
      // setValue waits for the from Store to be loaded     
      fromStore.fireEvent('load', fromStore);     
  },

  View Code
• tree代码
• 

  var sm_org_tree = Ext.create('Crunii.tree.Panel', {                     
             store: Ext.create('Ext.data.TreeStore', {                     
                 autoLoad: true,                     
                 root: {                     
                     id: 0,                     
                     text: '根节点',                     
                     leaf: true,                     
                     expanded: true
                 },                     
                 fields: ['id', 'code', 'text', 'leaf', 'comments', 'sort', 'expanded', 'children'],                     
                 proxy: {                     
                     type: 'ajax',                     
                     url: 'sm/org/tree.do'
                 }                     
             }),                     
             rootVisible: false,                     
             columns: [{                     
                 header: 'id',                     
                 dataIndex: 'id',                     
                 hidden: true
             }, {                     
                 xtype: 'treecolumn',                     
                 header: '名称',                     
                 dataIndex: 'text',                     
                 width: 200                     
             }],                     
             listeners: {                     
                 selectionchange: function(view, selections) {                     
                     var record = sm_org_tree.getSelectionModel().getSelection();                     
                     ds.proxy.extraParams.smOrgId = record[0].get('id');                     
                     ds.load();                     
                 }                     
             },                     
             flex: 3.7,                     
             height: 400,                     
         });

  View Code
• 这个是装itemselector的form，我用了 xtype: 'fieldcontainer',来装tree和itemseletor.
• 

  var isForm = Ext.widget('form', {                  
              width: 700,                  
              bodyPadding: 10,                  
              height: 400,                  
              layout: 'fit',                  
              items: [{                  
                  xtype: 'fieldcontainer',                  
                  layout: 'hbox',                  
                  items: [sm_org_tree, {                  
                      xtype: 'splitter'
                  }, {                  
                      xtype: 'itemselector',                  
                      name: 'itemselector',                  
                      id: 'itemselector-field',                  
                      anchor: '100%',                  
                      imagePath: '../ux/images/',                  
                      store: ds,                  
                      displayField: 'cname',                  
                      valueField: 'id',                  
                      allowBlank: false,                  
                      msgTarget: 'side',                  
                      fromTitle: '人员',                  
                      toTitle: '已选择',                  
                      flex: 9                  
                  }]                  
              }, ],                  
              dockedItems: createDockedItems('itemselector-field')                  
          });

  View Code
• 这样就能实现上面的图片的功能了

转载于:https://www.cnblogs.com/zhengxp/p/4512203.html