- 浏览: 113063 次
- 来自: 北京
文章分类
最新评论
-
hww_1030:
spring+springmvc+ibatis整合注解方式实例 -
jackclchan:
你好,能将demo源码发我下吗?jackclchan@qq.c ...
spring+springmvc+ibatis整合注解方式实例 -
amwiqplhui:
你好,能将demo源码发我下吗?772851689@qq.co ...
spring+springmvc+ibatis整合注解方式实例 -
jiangshenyi:
你好,上面的demo 能发我一份了 deshanjiang8 ...
spring+springmvc+ibatis整合注解方式实例 -
springmvc-freemarker:
spring mvc demo教程源代码下载,地址:http: ...
spring+springmvc+ibatis整合注解方式实例
对布局很是不熟,至今为止,也是一直在抄土豆demo里的BorderLayout,frank的deepcms ProjectTracker里的ViewPort布局而已,不过有了布局,咱们不用再去摆弄frameset了,只需要div就可以做成端端正正的布局,嗯,只这一点儿就吸引了多少眼球啊。
唉,咱们一起学学关于布局的用法吧。
理论上说,把整个窗口切成五块就够了吧?东南西北中,east,south,west,north,center其中只有center中间这个部分是必须的,你完全可以把围绕在它四周的东西当作配角。
这样说还是太抽象,这个时候效果图绝对比其他途径来的直观。
实际上代码还是比较干净的。
var mainLayout = new Ext.BorderLayout(document.body, { north: { initialSize: 50 }, south: { initialSize: 50 }, east: { initialSize: 100 }, west: { initialSize: 100 }, center: { } }); mainLayout.beginUpdate(); mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false })); mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false })); mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true })); mainLayout.endUpdate();
html需要五个div与其对应,div与ContentPanel是一一对应的,请看他们的id。
<div id="north-div">north</div> <div id="south-div">south</div> <div id="east-div">east</div> <div id="west-div">west</div> <div id="center-div">center</div>
这个其实挺有意思的,你必须先构造一个BorderLayout,指定需要渲染的部分,这里是document.body,并指定5个部分的初始化大小,然后调用beginUpdate()让整个布局先不要刷新,当然我们最后会调用endUpdate()刷新布局,这样用户就获得了更好的体验。
beginUpdate()之后,我们立刻使用add方法,向5个部分分别加入Ext.ContentPanel,这些面板的第一个参数是对应dom的id,后边是附加的参数,比如fitToFrame:true,它告诉面板在布局区域改变大小的时候调整自己的大小,然后是closable:false,这样用户就不能点击关闭按钮,关闭这个面板。
好了,你也看到了,这五个部分明显已经分隔开了,使用的时候我们只需要在合适的地方放上合适的东西就行了。
例子在lingo-sample/1.1.1/06-01.html。
其实,即使只能在不同浏览器,把一个窗口切成相同的部分,也是足够了,不过ext带给我们的不仅仅是如此,让我们再看看其他部分吧。
var mainLayout = new Ext.BorderLayout(document.body, { north: { initialSize: 50, split: true }, south: { initialSize: 50, split: true }, east: { initialSize: 100, split: true }, west: { initialSize: 100, split: true }, center: { } });
让我们给所有区域都加上split:true,看看会有什么效果?
请注意一点,这并不仅仅是那些边框变粗了,split让我们可以自由拖动边框,让用户可以改变各个区域的大小。
当然,我们不会让用户为所欲为的,让我们加上一点点限制,这点儿限制绝对不会让用户感到难堪。
var mainLayout = new Ext.BorderLayout(document.body, { north: { initialSize: 50, minSize: 40, maxSize: 60, split: true }, south: { initialSize: 50, minSize: 40, maxSize: 60, split: true }, east: { initialSize: 100, minSize: 80, maxSize: 120, split: true }, west: { initialSize: 100, minSize: 80, maxSize: 120, split: true }, center: { } });
minSize和maxSize让用户只能在我们决定的范围内修改区域的大小,既不会太大,也不会太小。用户的行为受限,也减少了他们抱怨的机会。嘿嘿,一切尽在掌握中。
例子见lingo-sample/1.1.1/06-02.html
var mainLayout = new Ext.BorderLayout(document.body, { north: { initialSize: 50, minSize: 40, maxSize: 60, titlebar: true, split: true }, south: { initialSize: 50, minSize: 40, maxSize: 60, titlebar: true, split: true }, east: { initialSize: 100, minSize: 40, maxSize: 60, titlebar: true, split: true }, west: { initialSize: 100, minSize: 40, maxSize: 60, titlebar: true, split: true }, center: { } });
在上面的基础上,我们加入了titlebar,然后看到的就是这幅情景。
标题栏是空的,要加标题我们另有地方,看看ContentPanel的部分。
mainLayout.beginUpdate(); mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false, title: '北' })); mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false, title: '南' })); mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false, title: '东' })); mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false, title: '西' })); mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true })); mainLayout.endUpdate();
经过这些改变,整个布局就变成了这个样子。
例子是lingo-sample/1.1.1/06-03.html。
很多软件都可以这样哦,看小面板不顺眼,就折叠起来,为中间的工作区留出更多空间哟。就像这样。
都折叠上以后就变成这样。
其实只要加一个属性就可以了,看看代码中的collapsible: true造就了现在的盛况。
var mainLayout = new Ext.BorderLayout(document.body, { north: { initialSize: 50, minSize: 40, maxSize: 60, titlebar: true, collapsible: true, split: true }, south: { initialSize: 50, minSize: 40, maxSize: 60, titlebar: true, collapsible: true, split: true }, east: { initialSize: 100, minSize: 40, maxSize: 60, titlebar: true, collapsible: true, split: true }, west: { initialSize: 100, minSize: 40, maxSize: 60, titlebar: true, collapsible: true, split: true }, center: { } });
你还可以加上collapsedTitle属性,让北方和南方区域折叠之后显示,这个属性只在north和south部分有效,因为west和east是垂直的,似乎没有办法让文字旋转90度显示,所以我们需要其他方法。
参考网上的方式,是用一个图片,窄窄高高的图片,然后把它作为对应css样式的背景图,这样在east和west折叠的时候就会显示它们了。让咱们试验一下好了。
我们需要设置的css有两个,west对应左边,east对应右边。
.x-layout-collapsed-west { background-image: url(user_male.png); background-repeat: no-repeat; background-position: center; } .x-layout-collapsed-east { background-image: url(user_female.png); background-repeat: no-repeat; background-position: center; }
最后就变成了这样。
嘿嘿,有意思吧。代码都在lingo-sample/1.1.1/06-04.html里呢,你也试试吧。
mainLayout.beginUpdate(); mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: true, title: '北' })); mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: true, title: '南' })); mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: true, title: '东' })); mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: true, title: '西' })); mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true })); mainLayout.endUpdate();
这个部分跟ContentPanel有关,把参数closable改成true就会出现那个小叉叉,按一下这个区域就关上了。
可惜现在还不知道关闭以后再怎么打开,嘿嘿。
简单来说,用了ViewPort摆脱先定义BorderLayout,再beginUpdate,endUpdate的麻烦,我们就问了,为什么事情不能更简单明了呢,就让我们看看用2.0解决上头的五块是个什么样子?
首先html里的东东不变。
<div id="north-div">north</div> <div id="south-div">south</div> <div id="east-div">east</div> <div id="west-div">west</div> <div id="center-div">center</div>
剩下的就是代码了,还是那句话,我们想要在一个地方配置好所有东西,不想东奔西跑,说不定丢了什么也不知道,维护多个地方的配置简直是噩梦,2.0啊,我们崇拜你。
var viewport = new Ext.Viewport({ layout:'border', items:[{ title: 'north', region: 'north', contentEl: 'north-div', split: true, border: true, collapsible: true, height: 50, minSize: 50, maxSize: 120 },{ title: 'south', region: 'south', contentEl: 'south-div', split: true, border: true, collapsible: true, height: 50, minSize: 50, maxSize: 120 },{ title: 'east', region: 'east', contentEl: 'east-div', split: true, border: true, collapsible: true, width: 120, minSize: 120, maxSize: 200 },{ title: 'west', region: 'west', contentEl: 'west-div', split: true, border: true, collapsible: true, width: 120, minSize: 120, maxSize: 200 },{ title: 'center', region: 'center', contentEl: 'center-div', split: true, border: true, collapsible: true }] });
如果非要挑刺的话,那就是没有closable的选项了,不过现实谁会去关闭一块面板啊?至少我不会滴。
现在所有配置都放在一起了,也不用先创建后布局两步走,方便呀。
发表评论
-
网页的常用属性,便于以后编写网页查询
2011-02-11 18:01 946这里收藏一些编写网页的常用属性,便于以后编写网页查询。&quo ... -
javascript经典代码
2011-01-28 17:07 7741. oncontextmenu="window ... -
Ext 常用控件属性列表
2011-01-25 11:33 1098Ext 常用控件属性列表 Ext 常用控件属性列 ... -
extJs grid的常见问题:
2011-01-22 12:54 1575grid的常见问题: 1, grid数据为空.2, ... -
ext 控件属性
2011-01-21 14:33 1159Ext.Action action实现一个脱离了容 器的事件 ... -
extjs-tag (即使不会extjs和js也能开发页面)
2011-01-21 10:47 989最近在做一个公司的框架,采用extjs+dwr,由于考虑到ex ... -
第 9 章 沉寂吧!我们要自己的控件
2011-01-21 10:02 928第 9 章 沉寂吧!我们要自己的控件 Script 2008 ... -
第 8 章 哭泣吧!现在才开始讲基础问题。
2011-01-21 10:01 8028.1. Ext.get ... -
第 7 章 低鸣吧!拖拽就像呼吸一样容易。
2011-01-21 10:00 9047.1. 如此拖拽,简直就像与生俱来的本能一 ... -
第 5 章 雀跃吧!超脱了一切的弹出窗口。
2011-01-21 09:59 8615.1. 呵呵~跳出来和缩回去总给人惊艳的感 ... -
第 4 章把表单和输入控件都改成ext的样式。
2011-01-21 09:58 10364.1. 不用ext的form啊,不怕错过有 ... -
第 3 章 歌颂吧!只为了树也要学ext。
2011-01-21 09:57 10893.1. 真的,我是 ... -
第 2 章 震撼吧!让你知道ext表格控件的厉害。
2011-01-21 09:57 14042.1. 功能丰富,无人能出其右 ... -
第 1 章 闪烁吧!看看extjs那些美丽的例子。
2011-01-21 09:56 953.1. 一切从extjs发布包开 ... -
ext-grid常见问题 FAQ: Grid
2011-01-19 11:24 1142grid的常见问题: 1, gri ... -
最强学习笔记---GridPanel(基础篇)
2011-01-19 11:19 882我不想教各位新手什么 ...
相关推荐
让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才开始讲基础问题。 第 9 章 沉寂吧!我们要自己的控件 说在前头的 附录 A. 常见问题乱弹 ...
奔腾绿色浏览器 自定义窗口 控件 消息 很值得学习和借鉴奔腾绿色浏览器 自定义窗口 控件 消息 很值得学习和借鉴
奔腾绿色浏览器 自定义窗口 控件 消息 很值得学习和借鉴
1、支持个性化定制网站导航,可以对网址随意编辑,支持网址的导入、导出; 2、多标签浏览,节省多面...5、自己一个人开发这个浏览器也不容易,希望大家多多支持,你的支持是我无穷的动力,也希望大家可以多给我提建议。
让不同的浏览器里显示一样的布局。 6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。 6.2. 关于BorderLayout 6.3. 嗯,不如再看看附加效果 6.3.1. 先看看split 6.3.2. 再试试titlebar 6.3.3. 还不够,...
随“芯”而变,“奔腾”不息!“SNB”核心奔腾G620处理器详测.pdf
让我们一起奔腾吧.pdf
奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版
可运行的浏览器源代码,是开源的GREENBROWSER,若缺少两个必须的头文件,请到我的资源下载。
英特尔 第二代英特尔奔腾M处理器产品简介pdf,英特尔 第二代英特尔奔腾M处理器产品简介
2014届高中语文 第一专题让我们一起奔腾吧同步练测 苏教版必修1
奔腾clover引导,最高支持10.15.拯救老电脑,10.14亲测流畅
酷睿?奔腾?谢谢!本本CPU型号解惑.pdf
奔腾资料管理v6.0 免补丁已破解
让不同的浏览器里显示一样的布局。 6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。 6.2. 关于BorderLayout 6.3. 嗯,不如再看看附加效果 6.3.1. 先看看split 6.3.2. 再试试titlebar 6.3.3. 还不够,还...
第6章 带符号数、字符串和表 第7章 模块及模块化程序设计 第8章 x86的32位程序设计 第9章 8088、80286微处理器与isa总线 第10章 存储器及其接口 第11章 8255 i/o编程 第12章 lcd、电动机、adc及传感器接口 第13章 ...
万马奔腾PPT模板下载
让不同的浏览器里显示一样的布局。 6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。 6.2. 关于BorderLayout 6.3. 嗯,不如再看看附加效果 6.3.1. 先看看split 6.3.2. 再试试titlebar 6.3.3. 还不够,还不够,...