ExtJS Bubble

MyTreePanel = Ext.extend(Ext.tree.TreePanel,{
    menu:null,
    constructor:function(){
        this.menu = new Ext.menu.Menu({//必须写成this.menu,否则会创建新的变量,JS决定
            items:[
                {text:"添加",handler:this.onInsertNode,scope:this},
                {text:"删除",handler:this.onRemoveNode,scope:this},
                {text:"修改",handler:this.onUpdateNode,scope:this}
            ]
        });
        MyTreePanel.superclass.constructor.call(this,{
            renderTo:Ext.getBody(),
            animate:true,
            expanded:true,
            width:300,
            height:500,
            maskDisabled :false,
            /*loader:new Ext.tree.TreeLoader({
                dataUrl:"http://localhost/ext/handlers/GetTree.ashx",
                clearOnLoad:false
            }),*/
            //远程数据,根据节点加载数据
            /*root: {
                nodeType:"async",
                text: '根节点',
                draggable: false,
                id: "0"
            },*/
            //本地数据
            root:new Ext.tree.AsyncTreeNode({
                text:"根节点",
                expanded:true,
                children:[
                    {
                        text:"硬件",
                        children:[
                            {
                                text:"板级维修",
                                leaf:true
                            },
                            {
                                text:"元件级维修",
                                leaf:true
                            }
                        ]
                    },
                    {
                        text:"软件",
                        leaf:true
                    }
                ]
            }),
            //一次性获取所有节点
            /*root:new Ext.tree.AsyncTreeNode({
                text:"根节点",
                id:"0"
            }),*/
            listeners:{
                "contextmenu":{
                    fn:this.onContextMenuClick,
                    scope:this
                },
                'click':{
                    fn:this.onClick,
                    scope:this
                }
            }
        });
    },
    onClick:function(_node,_e){
        _node.bubble(function(n){
            console.log(n.text);
            if(n.text == '硬件'){
                        
                console.log('找到节点,停止冒泡');
                return false;
            }
        });
    },
    onContextMenuClick:function(_node,_e)
    {
        this.menu["currNode"] = _node;
        if(this.menu["currNode"].id == "0")
        {
            this.menu.items.itemAt(1).setDisabled(true);
        }
        else
        {
            this.menu.items.itemAt(1).setDisabled(false);
        }
        this.menu.showAt(_e.getXY());
    },
    onUpdateNode:function(){
        Ext.Msg.prompt("请输入新的节点名称","信息提示",this.onUpdatePrompt,this,false,this.menu["currNode"].text);
    },
    onUpdatePrompt:function(_btn,_text){
        if(_btn == "ok")
        {
            this.menu["currNode"].setText(_text);
        }
    },
    onRemoveNode:function(){
                      
        Ext.Msg.confirm("信息提示","真的要删除该节点",this.onRemoveConfirm,this);
    },
    onRemoveConfirm:function(_btn){
        if(_btn == "yes")
        {
            this.menu["currNode"].remove();
        }
    },
    onInsertNode:function(){
        Ext.Msg.prompt("请输入要添加的节点名称","信息提示",this.onInsertPrompt,this);
    },
    onInsertPrompt:function(_btn,_text){
        if(_btn == "ok")
        {
            this.menu["currNode"].leaf = false;//将节点改为非叶子节点
            this.menu["currNode"].appendChild(new Ext.tree.AsyncTreeNode({text:_text,id:Ext.id(),leaf:true}));
            this.menu["currNode"].expand();
        }
    }
})

点击查看原图

知识共享许可协议
《ExtJS Bubble》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     152.34ms