Panel作为Window组件的子组件时现身重复边框难题,ExtJs自学教程

By admin in 4858美高梅 on 2019年8月3日

Extjs的Panel和Window等零件在暗许景况下是带边框的,平常状态下,单独行使未有何关联,不过将Panel作为Window组件的子组件时就能够并发重复边框的情形,若是Window组件中含有四个可能三个以上的Panel,那么Panel和Panel组件之间的边框会重复累加,也正是说会化为双重边框。实际上双重边框并不是很影响外观,但有个别看上去会有些不太如意,因而大家就得想艺术将两重边框去掉,形成单边框。上边是内外两张相比较图,我们留神察看一下七个window的边框部分,能够开掘前面二个很粗大,前面一个一点也不粗。

Extjs的Panel和Window等零件在私下认可情状下是带边框的,平日状态下,单独接纳未有啥样关联,可是将Panel作为Window组件的子组件时就能够产出重复边框的场合,假设Window组件中富含五个可能五个以上的Panel,那么Panel和Panel组件之间的边框会重复累加,也正是说会成为双重边框。实际上双重边框实际不是很影响外观,但稍事看上去会略微不太知足,因此我们就得想方法将两重边框去掉,形成单边框。上面是左右两张比较图,我们精心察看一下七个window的边框部分,能够窥见前面贰个相当粗,前面一个相当的细。

《二》 从DOM看EXTJS

4858美高梅 1

相关下载:EXTJS 类库 4.0

  看标题可能有人会问,为何好好的事例不看,得从DOM看起呢?答案是目的只为了三个:自运维结果把EXTJS看得更清楚点

                    图一

4858美高梅 2

  首先,要看得靠点工具,带点放大镜什么啊?对。大家须求的工具就是Internet
Explorer Developer
Toolbar(简称IEDevToolBar),它是三个IE查看DOM的构造的工具,还保有Style
Trace,Debug
style的功用,可谓意义庞大。大家在IE下解析DOM结构,靠的正是它了。当然,假若你挑选FireFox,fireBug也是一个科学的接纳,然而一般客户须求的是先行支持IE,那么依旧在IE下调节和测验的好。

4858美高梅 3

                    图一

  那么,简单来讲讲IEDevToolBar的选用,看下图:

                      图二

4858美高梅 4

4858美高梅 5

上边大家将在想化解的主意了。

                      图二

  最侧面的是页面包车型大巴DOM树查看区,中间是性质和体裁编辑区,该区能够自扩展和修改某些成分的属性和样式,那样就足以长足的调节和测量检验有个别属性了,
Show Read-Only Properties能够查阅只读的性质。左边是现阶段的样式查看。Show
Default Value 能够查看暗中同意的css样式。在Current
Style里,也许有二个很非常的功用,就是在有个别样式音讯上点右键,能够Trace
Style,从而追踪到该样式是由哪位css调控的,那样就会相当的慢的原则性到某些样式的调弄整理要求修改哪个css。选用有些成分,你既可以够因此箭头选用工具(ID
Developer
Toolbar上首先排工具条第三个)来挑选,也可以经过向来在DOM树里选取有个别结点。在DOM树里选择的结点在HTML页面里会先边框闪烁一会,再展现为三个水绿的框。通过鼠标工具采取的,则直接助长多少个紫中蓝的框。

第一想到的是大家得以让Window的边框为0,即设置Window组件的质量border:false,此时,能够发掘Window四周的边框编制程序单边框了,然则Window里面上边包车型大巴GridPanel和下部的Panel之间或许会有再度边框,显得不和谐,并且底部的工具条的周边未有了边框(因为“保存”开关所在的工具条是属于Window,Window的边框未有领悟后,当然会影响到底层工具条的边框)。于是这种方案不可行。弃之!

下边大家将要想消除的情势了。

  轻巧的牵线过了,接下去的。我们要用这几个工具去消除一部分留存的标题。

第三种方案是保留Window组件的边框,想艺术去掉Panel的边框,通过查ExtJS的赞助文书档案,开掘能够因此定义bodyStyle来决定Panel的样式。于是给地点的Panel分别安装bodyStyle属性,GridPanel:bodyStyle:
‘border-width:1px 0 1px 0;’,下方的Panel:bodyStyle: ‘border-width:1px
0 0 0;
background:transparent’,之后在刷新重新看功效,开采边框确实编制程序但边框了,但是还应该有部分边框是再度的,即时上面十二分GridPanel的表头的两边,以及下边按个Panel的Header的两边。开来这种措施还是相比较可信的。大家在条分缕析修改一下就好了。下一步要做的正是,为每叁个Panel定义二个cls属性,然后对由此和谐写样式来限制表头以及header的体裁,即覆盖ExtJS私下认可的样式(只是修改border的样式)。通过Chrome的“检查核对成分”发掘:表头暗许的三个CSS样式类是x-grid-header-ct,Panel私下认可的二个体裁类是x-panel-header。上面要做的便是和煦写样式来遮蔽在此以前的体制了,举个例子作者为多个Panel设置的cls为addr-panel,然后新加CSS样式类.addr-panel
.x-grid-header-ct{border-width: 1px 0 0 0 4858美高梅 ,!important;},.addr-panel
.x-panel-header{border-width:0;}。保存之后刷新之后查看效果,正是图二的成效了,实现!

首先想到的是大家得以让Window的边框为0,即设置Window组件的性质border:false,此时,能够窥见Window四周的边框编制程序单边框了,不过Window里面上边包车型地铁GridPanel和下部的Panel之间恐怕会有重复边框,显得不协和,况且尾部的工具条的四周未有了边框(因为“保存”按键所在的工具条是属于Window,Window的边框未有了随后,当然会影响到底层工具条的边框)。于是这种方案不可行。弃之!

Panel作为Window组件的子组件时现身重复边框难题,ExtJs自学教程。率先,编写一小段代码,完毕一个简短的panel展现效果:

假如现在大家在碰着类似的题目都足以考虑用CSS样式来缓慢解决。(完)^_^

其次种方案是保留Window组件的边框,想方法去掉Panel的边框,通过查ExtJS的扶助文书档案,发现能够经过定义bodyStyle来调控Panel的体制。于是给地方的Panel分别设置bodyStyle属性,GridPanel:bodyStyle:
‘border-width:1px 0 1px 0;’,下方的Panel:bodyStyle: ‘border-width:1px
0 0 0;
background:transparent’,之后在刷新重新看效用,发现边框确实编制程序但边框了,可是还会有一部分边框是重新的,即时上边十三分GridPanel的表头的两边,以及下边按个Panel的Header的两边。开来这种格局如故相比可信赖的。大家在精心修改一下就好了。下一步要做的正是,为每三个Panel定义二个cls属性,然后对通过投机写样式来界定表头以及header的样式,即覆盖ExtJS暗中认可的样式(只是修改border的体制)。通过Chrome的“考察成分”发掘:表头暗许的八个CSS样式类是x-grid-header-ct,Panel暗许的三个样式类是x-panel-header。上面要做的正是温馨写样式来覆盖以前的体制了,比方本人为四个Panel设置的cls为addr-panel,然后新加CSS样式类.addr-panel
.x-grid-header-ct{border-width: 1px 0 0 0 !important;},.addr-panel
.x-panel-header{border-width:0;}。保存之后刷新之后查看效果,就是图二的职能了,达成!

new Ext.Panel({ renderTo: ‘panelDiv’, title: ‘标题’, width: 200, height:
200, frame: true, items:[{ xtype: ‘button’, text: ‘开关’ },{ html:
‘一些文本’ }], buttons:[{ text: ‘后面部分开关’ }] });

你恐怕感兴趣的篇章:

  • js达成通用的微信分享组件示例
  • JS表格组件神器bootstrap
    table详解(基础版)
  • JS组件Bootstrap落成弹出框和指示框效果代码
  • JS组件Bootstrap
    Select2使用办法详解
  • JS组件Bootstrap
    Table使用方法详解
  • Js组件的有的写法
  • ExtJs 学习笔记基础篇
    Ext组件的施用
  • jquery滚动组件(vticker.js)完毕页面动态数据的轮转效应
  • JS组件Form表单验证神器BootstrapValidator
  • JS组件体系之使用HTML标签的data属性初步化JS组件

只要现在我们在遇见类似的难题都能够思量用CSS样式来解决。(完)^_^

运作效果如下:

4858美高梅 6

  那是二个最常见但是的Ext
Panel相关应用的完毕。展开看到开采原DIV并不曾改观,只是在其内部扩大了一文山会海的DIV。那样您就知道了,renderTo并未改造原本的指标。而是在其里素不相识成了一层层的PANEL变成大家看看的组件效果。依次看各DIV的class命名,你会开采Ext的css命名是很有理的。都带有当前目的的xtype名,举例当前那么些panel就成了”x-panel”。

  好了,DIV内部临时不细说了。最近既是要化解难点,那么大家先“创建”点麻烦(一般想造成大师都得没事找点麻烦的,例如顺着不走倒着走之类)。 

一个一点都不大的改观,把 frame: true 给去掉,看渲染,看看成啥样了:

4858美高梅 7

得,“一些文书”那某些被二个丧权辱国的框给框住了。接下来就要发轫深入分析了。从<div
id=panelDiv>起头一流级找下去,找到<DIV class=x-panel
id=ext-comp-1003>这些,看选取的造型。和出题指标不得了框大概了。依照那个class使用的称呼为x-panel和源代码看来。选择的那么些正是代码:
{ html: ‘一些文本’ }
变动的那有的了。
接下来便必要追踪这一部分的样式了,看看到底是何地出了难点。从id=ext-comp-1003那几个出发向上面就3个结点,找起来也正如快。

  懂点css的就驾驭,假设不是中间覆盖颜色,那么边框效果便是border创立出来的了。通过IEDevToolBar的选取查看形状(选择结点查看形状那么些很有用,能辅助我们相当的慢的定位四处理的结点),不是经过覆盖颜色做出的边框效果。那么一定是border-color创造的难题了。追踪第拔尖,Current
Style里border-width均为0,追踪第二级,里面一贯没去定义border-width,那么继续向下找。跟踪第三等第,问题找到了。
4858美高梅 8

看画圈的局地,由于设置了border为1px,导致了小编们开掘的羞耻的边框的出现。那样就想开了安装style,根据class的命名,大家猜度是body的style的难点。那么“想当然”,大家设置一下bodyStyle看看:

},{ bodyStyle: ‘border:none’, html: ‘一些文书’ }],

OK了!是否很有成就感。先Cheers一下~

….
….

下一场很可惜的告知你,API里其实早就详尽的说了:

bodyBorder : Boolean 
True to display an interior border on the body element of the panel,
false to hide it (defaults to true). This only applies when border ==
true. If border == true and bodyBorder == false, the border will display
as a 1px wide inset border, giving the entire body element an inset
appearance. 

这正是说身为,把子成分的border设置为false,难题就消除了。

  发掘API的重要了吧?其实过多标题,文书档案上面都早已详尽的说了,只怪你没留意看:),但是不用懊丧,那不是忽悠你,只是告诉您,有那样一种缓慢解决难点的门径而已。所谓条条大路通亚特兰洲大学,有了从DOM的角度去深入分析Extjs,就多了一条消除难点的方案。能消除难点的方案都以可性方案,至于哪条最佳,那就得靠你协和多“磨炼”了。比如调度form
layout的label宽度和适用的要素地点,有了IEDevToolBar的推来推去,将会变得实惠广大。

  至此两章,该学科也就病逝了。从API使用ExtJs是编辑功用代码去变通功效页面,而本章则是由页面结果去反向解析效果与利益代码。一正一反,相比较学习。

摘自 特种兵—AK47

从DOM看EXTJS
看题目也会有人会问,为什么好好的例证不看,得从DOM看起呢?答案是目的只为了一个:自运营结果把EXTJS看得更清楚点
首…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有