Ext中TreePanel控件和TabPanel控件搭配测试

阅读更多

 

  在实际的项目中,左边树形菜单,提供各种功能点击,右边一个面板,随着左边节点的选择表现不同的功能内容,这是一个相当经典的布局,在Ext框架中,有两个控件TreePanel和TabPanel刚好完成这些功能,本文就这两个控件的搭配使用和点击左边树节点引起右边内容变化的方法作一个简单的介绍。首先看下面的具体的代码。

 





TabPanel和Tree控件搭配测试









 

  上面代码中,构建了两个控件menuTree和contentPanel,menuTree用来显示具体功能菜单,contentPanel用来展示具体功能内容,menutTree中的节点是通过appendChild()方法手动加上去的,而且为了介绍方便,每个节点都添加了一个处理点击事件的函数,在具体应用中,还可以使用AsyncTreeNode()和TreeLoader()动态载入节点,下面着重介绍点击树节点引起功能区变化的方法,上面代码中用到了三种方法。

 

  (1)通过TabPanel控件的html属性配合