ext js 拖拉框

Ext.BLANK_IMAGE_URL = __prime.constants.contentPath + '/ext/resources/images/default/s.gif';
var clientWidth = document.body.clientWidth - 15;
var clientHeight = document.body.clientHeight;
var selectbankInfoArr= [];
var data = [];
var bankCde = "";
var treeFlag = true;
var bankInfoField =null;
//用户集、选中用户 共同使用的数据映射关系
var bankFields = [
    {name:'bankCde', mapping:'bankCde'} ,
    {name:'bankName', mapping:'bankName'}
];
//融资机构    
bankInfoStore = new Ext.data.JsonStore({
    url : __prime.constants.contentPath + '/bankTreeMngAction_doListBank.action',
    root : 'data',
    fields : bankFields
});
bankInfoStore.load();

var bankInfoCols = [
    {
         header:'融资机构',            
         dataIndex:'bankCde',
         renderer : function (data, metadata, record, rowIndex, columnIndex, store) {
                     metadata.attr = 'ext:qtip="'+record.get('bankName')+'"';
                    var displayText = record.get('bankName')
                    return displayText;
                  }
    },{
        header:'银行代码',            
        dataIndex:'bankCde',
        hidden:true
       }
  ]

//用户集
var bankFirstGrid = new Ext.grid.GridPanel({
    id                    : 'first',
    ddGroup              : 'secondGridDDGroup',
    border                : false,
    store                : bankInfoStore,
    columns              : bankInfoCols,
    enableDragDrop       : true,
    stripeRows           : true,
    loadMask              : true,
    width                : clientWidth*0.3,
    region               : 'west',
    viewConfig            : {
        forceFit : true     
    },
    tbar: [{
        xtype        : 'textfield',
        name :'bankName',
        id : 'bankName',
        maxLength     : 30,
        width         : 100
        },' ',' ',' ',' ', new Ext.form.TwinTriggerField({
        xtype            : 'twintriggerfield',
        trigger1Class    : 'x-form-search-trigger',
        trigger2Class    : 'x-form-clear-trigger',
        maxLength         : 30,
        width             : 35,
        onTrigger1Click : function(){
            bankInfoStore.baseParams.bankName = Ext.getCmp('bankName').getValue();
            bankInfoStore.load();
        },
        onTrigger2Click : function(){
            Ext.getCmp('bankName').setValue('');
            bankInfoStore.baseParams.bankName = '';
        }
    })]
});

//选中用户 数据集
var bankSecondGridStore = new Ext.data.JsonStore({
    url        : __prime.constants.contentPath + '/bankTreeMngAction_doListBankPre.action',
    root     : 'data',
    fields     : bankFields
});
    
//选中用户
var bankSecondGrid = new Ext.grid.GridPanel({
    id                    : 'second',
    ddGroup              : 'firstGridDDGroup',
    dropConfig            : {appendOnly:true},
    border                : false,
    style                : 'border-left:1px solid #99bbe8;',
    store                : bankSecondGridStore,
    columns              : bankInfoCols,
    enableDragDrop      : true,
    enableDrag            : true,
    stripeRows           : true,
    loadMask              : true,
    width                : 120,
    region               : 'center',
    title                : '选中机构',
    viewConfig            : {
        forceFit : true     
    }
});

//用户 面板
var bankDisplayPanel = new Ext.Panel({
    layout    : 'border',
    border    : false,
    bodyStyle    : 'border-bottom: 1px solid #99bbe8;',
    items    : [
        bankFirstGrid,
        bankSecondGrid
    ],
    buttons    : [ 
        {
            text    : '重置',
            id        : 'reset',
            handler : function() {
                bankSecondGridStore.removeAll();
                data.length=0;
            }
        },{
            text     : '确定',
            id        : 'save',
            handler : function() {
                    var names=[];
                    for(var m=0;m<bankSecondGridStore.getCount();m++){
                         var bankCde= bankSecondGridStore.getAt(m).get('bankCde');
                         var bankName= bankSecondGridStore.getAt(m).get('bankName');
                         if(bankCde!= null){
                            data.push(bankCde);
                            names.push(bankName);
                        }
                    }
                // console.log(data);
                 bankInfoField.setValue(names);
                 winSetUser.hide();
                 bankInfoField = null;
            }
        },{
            text    : '关闭',
            handler    : function() {
                winSetUser.hide();
                 bankInfoField = null;
            }
        }
    ]
});
//配置用户窗口
winSetUser = new Ext.Window({
        id                : 'winSetUser',
        bodyStyle        : 'background-color:#ecf2f9;',
        width             : clientWidth*0.6,
        height             : 350,
        title             : '融资机构',
        modal             : true,
        closeAction     : 'close',
        resizable         : false,
        frame             : true,
        draggable        : false,
        animateTarget     : 'setUser',
        layout            : 'fit',
        closable        : false,
        items             : [bankDisplayPanel]
    });
    
function setUser(){
    var record = bankFirstGrid.getSelectionModel().getSelected();
    winSetUser.show();
    bankInfoStore.load();
    //选中用户向用户集 拖放时的删除动作
    var firstGridDropTargetEl =  bankFirstGrid.getView().el.dom.childNodes[0].childNodes[1];
    var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
        ddGroup    : 'firstGridDDGroup',
        copy       : true,
        notifyDrop : function(ddSource, e, data){
            function addRow(record, index, allItems) {
                ddSource.grid.store.remove(record);
            }
            Ext.each(ddSource.dragData.selections ,addRow);
            return(true);
        }
    });     
    //用户集向选中用户 拖放时的添加动作
    var secondGridDropTargetEl = bankSecondGrid.getView().el.dom.childNodes[0].childNodes[1];    
    var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
        ddGroup    : 'secondGridDDGroup',
        copy       : false,
        notifyDrop : function(ddSource, e, data){
            function addRow(record, index, allItems) {
                for(var i=0; i<bankSecondGridStore.getCount(); i++){
                    if(record.data.bankCde == bankSecondGridStore.getAt(i).get('bankCde'))
                        return;
                }
                bankSecondGridStore.add(record);
            }
            Ext.each(ddSource.dragData.selections ,addRow);
            return(true);
        }
    }); 
}
        
function createBankInfoField(id,label,anchor){
    return new Ext.form.TriggerField({
        fieldLabel     : label,
        id            : id,
        name        : id,
        editable     : false,
        forceSelection : true,
        triggerAction : 'all',
        anchor:anchor,
            onSelect : function(record) {
            },
            onTriggerClick : function() {
                bankInfoField =this;
                setUser();
            }
        });
}