column-tree如何弹出新增子项目的窗口，代替MessageBox

Question

初学Ext，column-tree树基本搞懂了，但不知如何按下增加按钮弹出窗口录入新增的项目，并把值传递回树（要代替MessageBox，因MessageBox只有一个输入框），那位能给详细的过程，
以下是我的column-tree树：
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
var tree = new Ext.tree.ColumnTree({
loadMask:true,
el:'tree-ct',
width:700,
autoHeight:true,
rootVisible:false,
autoScroll:true,
expandable:false,
enableDD:true,
title: '部门设置',
tbar: [{
text:'保存',
tooltip: '保存',
iconCls:'save-icon',
listeners: {
'click': function() {
var json = tree.toJsonString(null,
function(key, val) {
return (key == 'leaf' || key == 'id' || key =='menu_item'|| key == 'menu_url');
}, {
menu_item: 'text',
menu_url: 'href'
}
);
alert(json);
},
scope:this
}
},{
xtype:'tbseparator'
},{
text:'增加部门',
tooltip: '增加部门',
iconCls:'folder-icon',
listeners: {
'click' : function(){
var selectedItem = tree.getSelectionModel().getSelectedNode();
if (!selectedItem) {
Ext.Msg.alert('Warning', 'Please select an Item after which you want to add a new one.');
return false;
}

                    handleCreate = function (btn, text, cBoxes){
                        if(text) {
                            var newNode = new Ext.tree.TreeNode({
                                    menu_item: text,
                                    menu_url: Ext.id(),
                                    leaf: false,
                                    uiProvider: Ext.tree.ColumnNodeUI
                            });
                            selectedItem.leaf= false;
                            selectedItem.appendChild(newNode);
                        }
                    }

                    Ext.MessageBox.show({
                        title:'增加部门',
                        msg: 'Name of Folder Item:',
                        buttons: Ext.MessageBox.OKCANCEL,
                        prompt:true,
                        fn: handleCreate
                    });

                }
            }
        },{
        /*  xtype:'tbseparator'
        },{
            text:'增加所属部门',
            tooltip: '增加所属部门',
            iconCls:'page-icon',
            listeners: {
                'click' : function(){
                    var selectedItem = tree.getSelectionModel().getSelectedNode();
                    if (!selectedItem) {
                        Ext.Msg.alert('Warning', 'Please select an Item after which you want to add a new one.');
                        return false;
                    }

                    handleCreate = function (btn,text){
                        if(btn == 'ok' && text) {
                            var newNode = new Ext.tree.TreeNode({
                                    menu_item: text,
                                    menu_url: Ext.id(),
                                    leaf: true,
                                    allowChildren:true,
                                    uiProvider: Ext.tree.ColumnNodeUI
                            });
                            if(selectedItem.isLeaf()) {
                                selectedItem.parentNode.insertBefore(newNode, selectedItem.nextSibling);
                            } else {
                                selectedItem.insertBefore(newNode, selectedItem.firstChild);
                            }
                        }
                    }
                    Ext.MessageBox.show({
                        title:'增加新的所属部门',
                        msg: 'Name of Page Item:',
                        buttons: Ext.MessageBox.OKCANCEL,
                        prompt:true,
                        fn: handleCreate
                    });
                }
            }
        },{*/
            xtype:'tbseparator'
        },{
            text:'重命名',
            tooltip: '重命名',
            iconCls:'page-icon',
            listeners: {
                'click' : function(){
                    var selectedItem = tree.getSelectionModel().getSelectedNode();
                    if (!selectedItem) {
                        Ext.Msg.alert('Warning', 'Please select an Item after which you want to add a new one.');
                        return false;
                    }

                    handlerename = function (btn,text){
                        if(btn == 'ok' && text) {
                            selectedItem.setText(text);

                            if(selectedItem.isLeaf()) {
                                selectedItem.parentNode.insertBefore(newNode, selectedItem.nextSibling);
                            } else {
                                selectedItem.insertBefore(newNode, selectedItem.firstChild);
                            }
                        }
                    }
                    Ext.MessageBox.show({
                        title:'重命名',
                        msg: '将修改为:',
                        buttons: Ext.MessageBox.OKCANCEL,
                        prompt:true,
                        fn: handlerename
                    });
                }
            }


        },{
            xtype:'tbseparator'
        },{
            text:'删除项目',
            tooltip: '删除项目',
            iconCls:'delete-icon',
            listeners: {
                'click' : function(){
                    var selectedItem = tree.getSelectionModel().getSelectedNode();
                    if (!selectedItem) {
                        Ext.Msg.alert('Warning', 'Please select an Item to delete.');
                        return false;
                    }

                    handleDelete = function (btn){
                        if(btn == 'ok') {
                            selectedItem.remove();
                        }
                    }
                    Ext.MessageBox.show({
                        title:'Confirm your action',
                        msg: 'Are you sure you want to delete this item and its children?',
                        buttons: Ext.MessageBox.OKCANCEL,
                        fn: handleDelete
                    });
                }
            }
        },{
            xtype:'tbseparator'
        }],
    columns:[{
        header:'部门',
        width:300,
        dataIndex:'menu_item'
    },{
        header:'URL',
        width:398,
        dataIndex:'menu_url'
    }],

    loader: new Ext.tree.TreeLoader({
        dataUrl:'column-data.json',
        uiProviders:{
            'col': Ext.tree.ColumnNodeUI
        }
    }),

    root: new Ext.tree.AsyncTreeNode({
        text:'Tasks'
    })
});
tree.render();
tree.expandAll();
    tree.on("dblclick",function(node){    
tree.opNode   = node;
node.select();

});

});

Answer 1

column-tree 只是一个UI组件而已,要控制他的数据都是操作它的Store的

至于怎么通过弹出窗口获得用户录入数据然后新增到column-tree也就是他的store里面
你可以这样

handler : function(){
var win = new Ext.Window({
//.... 窗口中间包含了接收数据的组件,一般是Form.然后你可以通过火的form的数据然后来操作column-tree的store 这一切的一切都可以通过查看api来掌握
});
win.show();
}