`
shaohan126448
  • 浏览: 116219 次
  • 来自: 北京
社区版块
存档分类
最新评论

第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。

阅读更多

6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。

 

对布局很是不熟,至今为止,也是一直在抄土豆demo里的BorderLayout,frank的deepcms ProjectTracker里的ViewPort布局而已,不过有了布局,咱们不用再去摆弄frameset了,只需要div就可以做成端端正正的布局,嗯,只这一点儿就吸引了多少眼球啊。

唉,咱们一起学学关于布局的用法吧。

6.2. 关于BorderLayout

 

理论上说,把整个窗口切成五块就够了吧?东南西北中,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。

6.3. 嗯,不如再看看附加效果

 

其实,即使只能在不同浏览器,把一个窗口切成相同的部分,也是足够了,不过ext带给我们的不仅仅是如此,让我们再看看其他部分吧。

6.3.1. 先看看split

 
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

6.3.2. 再试试titlebar

 
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。

6.3.3. 还不够,还不够,让四周的区域可以缩起来

 

很多软件都可以这样哦,看小面板不顺眼,就折叠起来,为中间的工作区留出更多空间哟。就像这样。

都折叠上以后就变成这样。

其实只要加一个属性就可以了,看看代码中的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里呢,你也试试吧。

6.3.4. 给这些区域都加上个关闭按钮

 
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就会出现那个小叉叉,按一下这个区域就关上了。

可惜现在还不知道关闭以后再怎么打开,嘿嘿。

6.3.5. 用NestedLayoutPanel在五块中再进行分割,实现更复杂的布局

 

我不会用。

6.4. 2.0的ViewPort是完全不同的实现

 

简单来说,用了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的选项了,不过现实谁会去关闭一块面板啊?至少我不会滴。

现在所有配置都放在一起了,也不用先创建后布局两步走,方便呀。

6.5. 稍稍感叹一下2.0的简洁吧,让人吃惊的还在后头呢。

分享到:
评论

相关推荐

    EXT2.0 简明教程!(chm)

    让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才开始讲基础问题。 第 9 章 沉寂吧!我们要自己的控件 说在前头的 附录 A. 常见问题乱弹 ...

    奔腾绿色浏览器奔腾绿色浏览器

    奔腾绿色浏览器是一款基于VC++开发的轻量级浏览应用,其主要特点是绿色无污染,无需安装即可使用,便于携带和分享。这款浏览器的核心技术在于它对自定义窗口、控件以及消息处理机制的优化,这使得用户在浏览网页时...

    奔腾浏览器(支持个性化定制网站导航)

    1、支持个性化定制网站导航,可以对网址随意编辑,支持网址的导入、导出; 2、多标签浏览,节省多面...5、自己一个人开发这个浏览器也不容易,希望大家多多支持,你的支持是我无穷的动力,也希望大家可以多给我提建议。

    掏钱学Ext(完整版) 附全部源码

    让不同的浏览器里显示一样的布局。 6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。 6.2. 关于BorderLayout 6.3. 嗯,不如再看看附加效果 6.3.1. 先看看split 6.3.2. 再试试titlebar 6.3.3. 还不够,...

    随“芯”而变,“奔腾”不息!“SNB”核心奔腾G620处理器详测.pdf

    随“芯”而变,“奔腾”不息!“SNB”核心奔腾G620处理器详测.pdf

    黑苹果奔腾clover引导EFI

    "黑苹果奔腾clover引导EFI" 是一个针对使用奔腾处理器的老款电脑安装苹果macOS系统的解决方案。在苹果官方停止对这些老型号硬件的支持后,爱好者们通过第三方引导工具Clover来实现“黑苹果”(即在非苹果硬件上运行...

    可运行的浏览器源代码,是开源的GREENBROWSER

    【标题】"可运行的浏览器源代码,是开源的GREENBROWSER" 提供了一个非常有价值的学习和研究平台,特别是对于那些对浏览器开发有兴趣或者想要深入理解浏览器工作原理的IT从业者。开源项目意味着任何人都可以查看、...

    让我们一起奔腾吧.pdf

    《让我们一起奔腾吧》是江河的一首充满激情与哲理的现代诗,这首诗以其独特的意象和深邃的意境,展示了作者对于生命、春天以及人生意义的思考。江河作为朦胧诗的代表诗人之一,他的作品往往富含厚重的历史感和深刻的...

    奔腾年代PPT模板.ppt

    第一章“峥嵘岁月 幻化风云”,以“奔腾年代Seabiscuit”为引子,强调在快速变化的时代中,我们需要有ROKEY WORKS(可能是指一种工作方法或理念)来驾驭未来,不断攀登,直至登临巅峰。这里的“至高鹜远 阔赢天下”...

    万马奔腾PPT模板下载

    同时,模板中的颜色可以灵活调整,以适应不同场合的需求,如商务报告可以选择更为庄重的色调,教育演示则可选择更活泼的色彩。 三、布局结构与信息传递 该模板通常包含标题页、目录页、内容页、总结页等基本组成...

    新奔腾的软件的清单工程编制

    “新奔腾”的软件可能是指一套专门用于工程管理和审计的工具,它为项目团队提供了标准化的文档格式,以确保在项目的不同阶段能够遵循统一的规范进行操作。PT2016视频第五部分,即“清单工程编制”,很可能是该软件...

    奔腾系列方控.apk

    奔腾系列方控.apk

    最强奔腾打字通V6.RAR

    "最强奔腾打字通V6"很可能也包含了这些基础练习,并可能通过不同的难度级别来满足不同水平的用户需求。此外,这类软件还会提供实时的打字速度和准确率反馈,帮助用户了解自身进步情况。 在描述中提到的“附带注册...

    奔腾打字通新版奔腾打字通新版

    奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版奔腾打字通新版

    英特尔 第二代英特尔奔腾M处理器产品简介.pdf

    英特尔第二代奔腾M处理器是英特尔公司在笔记本电脑市场上的重要产品线之一。该系列处理器基于英特尔NetBurst架构,以低功耗、高性能为特点,满足了移动办公用户的需求。本简介将详细解析该处理器产品线中的一些关键...

    奔腾资料管理软件

    奔腾资料管理v6.0 免补丁已破解

    一汽奔腾B70_汽车使用手册用户操作图解驾驶车主车辆说明书pdf电子版下载.pdf

    "一汽奔腾B70汽车使用手册用户操作图解驾驶车主车辆说明书pdf电子版下载" 一汽奔腾B70汽车使用手册用户操作图解驾驶车主车辆说明书pdf电子版下载.pdf是一份详细的汽车使用手册,旨在帮助车主熟悉并正确使用一汽奔腾...

Global site tag (gtag.js) - Google Analytics