首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

关于extjs treepanel的有关问题

2012-12-30 
关于extjs treepanel的问题! var viewport new Ext.Viewport({id: vpMain,layout: border,items:[pn

关于extjs treepanel的问题!
 var viewport = new Ext.Viewport
                ({
                    id: 'vpMain',
                    layout: 'border',
                    items:
                    [
                        pnlLeft
                                        ]
                });

        //创建menu
                var CreateMenuPanel = function(title, TypeID) {
                    return new Ext.Panel
                  ({
                      title: title,
                      layout: 'fit',
                      border: false,
                      frame: true,
                      items:
                        [{
                            xtype: 'treepanel',
                            singleExpand: true,
                            animate: true,
                            autoScroll: true,
                            containerScroll: true,
                            border: false,
                            width: 200,
                            height: 370,


                            enableDD: false,
                            dropConfig:
                            {
                                appendOnly: true
                            },
                            loader: new Ext.tree.TreeLoader({ url: "DefaultJson.aspx" }),
                            root: new Ext.tree.AsyncTreeNode
                            ({
                                id: TypeID,
                                text: title,
                                draggable: false,
                                expanded: true
                            })
                             , listeners: { "click": function(node, e) {
                                 if (typeof node.attributes.TypeID == "undefined") {
                                     return;
                                 }
                               
                                 var _TypeID = node.attributes.TypeID;
                                 var _TypeTitle = node.attributes.TypeTitle;


                                 var _TypeUrl = node.attributes.href;
                                 var tabs = Ext.getCmp("TabPanelID");
                                 var title = _TypeTitle;
                                 for (var i = 0; i < tabs.items.length; i++) {
                                     if (tabs.items.items[i].title == title) {
                                         tabs.activate(tabs.items.items[i]);
                                         return;
                                     }
                                 }
                                 var n = tabs.getComponent(node.id);
                                 if (_TypeUrl != "") {
                                     if (!n) { ////判断
                                         n = tabs.add({
                                             'id': _TypeID,
                                             'title': _TypeTitle,
                                             html: '<iframe scrolling="auto" frameborder="0" name="main" width="100%" height="100%" src="' + _TypeUrl + '"></iframe>'


                                         });
                                     }
                                 }

                                 tabs.activate(n);
//                                 var pnl = new RoomTypeManage(node.attributes.TypeID);
                                 //tabs.add(pnl);
                             }
                          }
                       }]
                  });
                };

        //加载左面的数据
        var loadPanelWest = function() {
            Ext.Ajax.request
                     ({
                         url: 'DefaultJson.aspx',
                         success: function(response, options) {
                             try {
                                 var pnlLeft = Ext.getCmp("pnlLeft");
                                 if (pnlLeft) {
                                     var children = pnlLeft.findByType('panel');
                                     if (children) {


                                         for (var i = 0, len = children.length; i < len; i++) {
                                             pnlLeft.remove(children[i], true);
                                         }
                                     }
                                 }
                                 var menusArray = Ext.util.JSON.decode(response.responseText);

                                 for (var i = 0; i < menusArray.length; i++) {
                                     var mp = CreateMenuPanel(menusArray[i].TypeTitle, menusArray[i].TypeID);
                                     pnlLeft.add(mp);
                                 }
                                 pnlLeft.doLayout();
                             }
                             catch (e) {

                             }
                         }
                     });
        };
        loadPanelWest();
关于extjs treepanel的有关问题

我用这个代码实现一个panel与tree面结合的tree 效果如上图,但有一个问题不知怎么解决,panel中通过通过title已经将根节点加了(计划运行),但treepanel又把计划运行这个当做要节点加载一次,这样就重复出现两次,计划运行,怎样将里面的根节点移除,并正常显示子节点,谢谢各位,急!


[解决办法]
在tabpanel加上
rootVisible:true//设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性

[解决办法]
你的意思是说,既然PANEL已经有"计划运行"这个标题了,下面的TREE里就不必再有一个"计划运行"这样的根节点了.是吧.

你可以把计划11,计划22,这样的子节点,直接作为根节点添加.
就是先把计划11作为根节点加到TREE里,然后把计划22作为根节点的兄弟节点加到计划11的后面.
这些在TREE控件的添加节点方法的参数里都可以设置,看下说明.

热点排行