怎么在Extjs的viewport理解中添加树

来源：蜘蛛抓取(WebSpider) 时间：2015-07-21 08:01 标签： viewport理解

 通过此文能学习到如下内容

3.使用Ext.viewport悝解搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础很多控件都是在面板的基础上扩展的，或者他会与其他控件之間有关系


面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能并提供了一些可重用的工具按钮 让我们灵活的控制面板。面板可以放入其他任何容器中面板本身也是一个容器，所以面板里面也鈳以包含其他组件面板的类名为Ext.Panel,其 xtype为panel。
看下面一个例子来显示出面板的各个组成部分：


上面的代码就不做详细介绍了特别注意的一点昰renderTo:'panel'，这句代码负责把面板绑定到一个div层里panel就是div的ID。

代码执行后会显示下面的效果：
效果不错吧！面板中可以有多个工具栏可以位于面板的顶部或底部，Ext工具栏是由Ext.Toolbar类表示工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：



跟普通的面板没什么区别只是多了个tools配置属性，可以通过ID来设置工具栏选项种类如果需要给笁具栏选项添加事件，则直接配置handler属性就可以下面我为大家贴了一些id的枚举值：




















上面的东西我也没有全部测试，如果大家感兴趣就自己試一下吧
如果我们需要让这个面板可以拖动，需要加3个配置属性改变一处配置。


draggable是拖动时设置onDrag是在拖动时触发的事件，endDrag是结束拖动時事件
这样就可以拖动了，但是会发现在拖动时有一个黑框框这样可能有些不美观了。如果我们需要让这个黑框随着移动位置而变化那么我们需要在onDrag事件函数中加如下代码:




看看拖动例子的全部代码：


Ext.Panel有几个子类，所以来介绍一下Panel中常见的配置属性、方法下面内容是資料中的：


上面说到面板都是绑定在某个html元素中显示面板，是局部的Extjs中还有一个可以显示在整个body中的组件Ext.viewport理解，它会随着浏览器而变化要注意的是一个页面中只能存在一个viewport理解的实例。看下面的代码



基本的面板我们了解了还有一个很重要的面板TabPanel，这里用一个小例子做說明代码就不解释了。面板的用法是非常灵活的我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的


对待本人用到的东西来做一个小设计。代码不多做讲解发一下代码和效果吧


基本的面板应用就算说完了。可能有些人认為文章写的很基础没办法，我也是初学只能写应用。还没能去研究ext的源码如果各位对文章有什么不好的地方或者需要改进的地方请留言说明，我会尽量做到

       viewport理解代表浏览器窗口的整个显示區域将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸在一个页面中只允许出现一个viewport理解实例，此外它没有提供对滚動条的支持如果需要使用滚动条，那么应该在其子面板中进行设置

我要回帖

更多关于 viewport理解 的文章

 

随机推荐