需要Extjs树中的Multi Select解决方案

时间:2014-05-19 12:47:02

标签: extjs

对Extjs来说完全陌生。我要求在Extjs树中允许多选。下面的代码是做单选。我需要更改代码,使其在选定的ID之间使用分号进行多选。任何人都可以根据要求更改代码。此外,如果您可以告诉我将树的选定值写入哪个字段或变量。提前致谢

    Ext.onReady(function() {   
Ext.QuickTips.init();
    var str='';
    var switch_flag = '';
    var approvals = '';
    var active_mode = '';

         var json = null;   
        Ext.Ajax.request({
            url: 'Dmscategorytree/ajax/Message',
            method: 'POST',
            params:{
                lifecycle_id: str,
                switch_flag: switch_flag,
                approvals: approvals,
                active_mode: active_mode
            },
            success: function(response, options) { 
            var path='';
            var id='';
            var text='';

            json=response.responseText;
            alert(json);
            json = json.replace(/"/g,'\"');    
            json=Ext.util.JSON.decode(json);
            var flag=true;
            var myloader = new Ext.tree.TreeLoader();
            myloader.load = function(node, cb,scope) {
                        if(this.clearOnLoad){
                            while(node.firstChild){
                                node.removeChild(node.firstChild);
                            }
                        }
                        if(this.doPreload(node)){
                            this.runCallback(cb, scope || node, [node]);
                        }
                        cb();
            }

         var tree = new Ext.tree.TreePanel({
                animate:true, 
                autoScroll:true,
                //loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
                containerScroll: true,
                border: false,
                loader:myloader,
                 rootVisible: false,

                listeners:{
                    checkchange:function(node){
                        if(flag){
                            toggleCheck(tree.root,false,node.id);
                             path=node.attributes.value;
                             id=node.attributes.ID;
                             text=node.attributes.text;
                                path=path.replace(/\^/g,'/');   
                        }
                    }
                }
            });

            function SelectToParent()
            {
            try
            {   
                parent.window.opener.callParent(path,id);
                parent.window.opener.focus();
                parent.window.close();
            } 
            catch(e){
                alert('got exception');
                window.close();
            }
            }

            function toggleCheck(node,isCheck,nodeId)
            {
                flag=false;
                if(node)
                {
                var args=[isCheck];
                node.cascade(function(){
                    c=args[0];
                    if(nodeId!=this.id){
                        this.ui.toggleCheck(c);
                        this.attributes.checked=c;
                    }
                    },null,args);
                }
                flag=true;
                return true;
            }
            var root = new Ext.tree.AsyncTreeNode({
                text: 'Ext JS',
                draggable:false, // disable root node dragging
                id:'src',
                children: json
            });
            tree.setRootNode(root);

            var topbar = new Ext.Toolbar({
                region : 'north',
                height:30,
                margins: '0 0 0 5',
                items:[
                {
                    xtype: 'box',
                    id: 'title',
                    autoEl: {
                        html: '@label.chooseCat@'
                    }
                    ,width:525
                },
                {
                    text: '@label.Done@',
                    id: 'doneBtn',
                    tooltip: 'Done',
                    handler: SelectToParent
                }
                ]
            });
            topbar.render('tree');
            tree.render('tree');
            tree.getRootNode().expand();    
        }
    });  
});