admin管理员组文章数量:1531461
2024年7月11日发(作者:)
一步一步学习ExtJS4——页面
布局(图文实例)主讲:许家志
一步一步学习ExtJS4.0——页面布局
——许家志
目标效果:
这种布局方式,经常在一些大型的B/S后台系统中可以看得到,应用的主要是Accordion布局还有
Border布局,具有广泛的应用价值,这节我们主要讲简单的布局实现,美工以及事件响应将在下一节讲
先决条件:
从ExtJS4.0的官方网站上面下载了Ext的开发包,然后引用到你的案例中,这里我们的引用顺序是
固定的, 先引用外观(CSS),在引用行为(JS)
在这个例子中,加上自己的脚本文件,我是这样引用的:
ExtJS为我们提供了丰富的组件,我们为我们用到的进行讲解,首先是Panel,下图为Ext4.0帮助文
档中的截图,主要介绍了的各种配置属性(config)
下面我们用里面的简单几个属性,来构造一个最简单的面板,代码如下:
效果图如下:
在此之前呢,我们所讲的完全围绕着的是Border布局,下面呢为了完善整个页面,中间呢,我们可
能会遇到一些小小的问题,这里我们可以通过实验来解决。
1. 为什么在Viewport的设置参数里面,非要用border?
原因很简单,相信做过web设计的人都曾遇到过这样一个问题“为什么要在具体实现左右布局的
时候要用到float属性”,这样对比理解就可以了,border布局,实现了部分面板的float属性,
使我们的页面显得更为灵活,不至于一片上下,而无左右。朋友们可以使用注释 layout属性的
方法来试验一下。
2. 为什么我在使用了Border布局之后,出现了”
SCRIPT5007: 无法获取属性“flex”的
值: 对象为 null 或未定义
”的错误?
细心的朋友可能会发现了,在使用了border布局之后,必须拥有的一个region为center面板,
否则就会出现上述错误,哪怕在在viewport的所有属性中最后只有一个center面板,也不会
有错误,但若是没有,则肯定会错。这就好像国不可一日无君一样。这里朋友们可以单独对items
进行部分注释来进行试验
3. 为什么我的文字显示不完整?
这不是你的错,只是因为现在的4版本对 IE9的支持上,文字显示就是不全,解决起来也只能是,
按F12,打开开发人员工具条,在里面设置 浏览器模式 为 IE8
第二部分 Accordion布局
通过前面的布局我们把整个页面布局给搭建好了,现在我们需要做的是将 左边的面板填充上一个可
折叠的菜单条,在之前,我们先建立一个menu的对象,代码如下:
var txtMenu="
"var menu=[{title:"第一天",html:txtMenu,autoWidth : true,align:'center'},{title:"第三天"},{title:"第四
天"},{title:"第五天"},{title:"第六天"}]
这里首先为菜单静态的创建了几个想选项,主要涉及到的构造属性有title以及html,当然还可以加
载页面,这里我们简单介绍,那么接下来我们要做的就是要改变westPanel来实现可折叠布局,下面为改
变后的代码:
这时候我们在运行的时候,就达到了最终的预期效果了:
Accordion翻译过来手风琴,联想到他,也不难理解为什么又叫做可折叠布局了。如果想要“按键“更
加漂亮的话,可以再通过把iconCls加到我们设置的menu中去,然后通过menu为Ico设置美工样式
依旧是老步骤,简单说一个容易出现的问题:
为什么我把代码都敲入了,但是没有出现菜单?
在其他语言诸如C#等等的朋友容易认为变量的定义前后顺序是没有关系的,因为在他们的编译过程
中,经过统一的编译后对前后顺序已经没有了限制,但是javascript则不同,javascript从上到下一句一
句顺序执行,所以刚才的txtMenu以及menu定义的代码要敲在westPanel之前才可以。
本节课程就到这里,欢迎继续关注ExtJS4.0的系列教程!
天天开心~
2012-2-6
版权声明:本文标题:一步一步学习ExtJS4——页面布局(图文实例)主讲:许家志 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1720649285a835845.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论