Extjs4 itemselector 的用法

浏览数：47 / 时间：2015年06月09日

最近做个关于组织和人员的选择的控件，先是在网上找了很多例子，但是都不能打到功能需求最后就看了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‘)                  
        });