qq_29913175

Ext JS 6开发实例（四）：调整主视图

标签：实例Ext-JS-6

2016-05-27 15:41 1373人阅读评论(0) 收藏举报

 
   分类： 
  
    ExTJS（166）

 版权声明：本文为博主原创文章，未经博主允许不得转载。

上文把主界面设置好，但是主视图因为界面的微调出现了显示问题，本文将把它调整好了。

打开app/view/main/Main.js，可以看到主视图是派生于标签面板（Ext.tab.Panel）的。在视图的标签栏内，除了显示标签外，还显示了标题栏。由于已经重新设计了标题栏，主视图的标签栏就不需要了，因而先把这个去掉。

检查一下代码，会发现代码中有个header配置项，根据API可以知道，该配置项是用来定义面板的标题的，因而把这段代码先去掉。在浏览器中刷新一下，会看到如下图的效果：

从图中可以看到，标题是去掉了，但还是有问题，再检查下代码，会发现以下三个配置项是与标题和标签的设置有关的：

<code class="hljs http has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-attribute" style="box-sizing: border-box;">tabBarHeaderPosition</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">1,</span>
    <span class="hljs-attribute" style="box-sizing: border-box;">titleRotation</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">0,</span>
    <span class="hljs-attribute" style="box-sizing: border-box;">tabRotation</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">0,</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

根据API，可以知道tabBarHeaderPosition是用来指定标题栏的位置的，因而可以去掉；titleRotation是用来控制标题文本的显示方向的，这个也可以去掉；tabRotation是用来控制标签文本的显示方向的，暂时保留。

刷新一下浏览器，可看到下图的效果：

从图中可以看到，标题栏已经去掉了，但是标签还是在顶部。查一下API，可以找到tabPosition配置项，通过它可以控制标签的位置，因而在代码中添加以下代码，让标签显示在左边：

<code class="hljs http has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-attribute" style="box-sizing: border-box;">tabPosition</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'left',</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

刷新一下浏览器，可看到如下图所示的效果：

从图中可以看到，目标已经实现了。

虽然基本目标已经达成，但是否还存在些小疑惑？为什么这个标签面板的标签显示与主题所默认所显示的标签（下图）会不同？

这是因为，在主视图中使用了自定义的UI，代码如下：

<code class="hljs http has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-attribute" style="box-sizing: border-box;">ui</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'navigation',</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

根据API，ui配置项的作用是用来指定组件的UI样式，默认值是default，也就是使用默认的样式。而在这里，将值指定为了navigation，也就是说，当前的标签页将使用navigation样式，那么这个样式是在哪里定义的呢？

大家打开sass\src\view\main\Main.scss文件，就会看到navigation的样式定义了。打开文件后，会看到如下的一些代码：

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">@include extjs<span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-panel</span><span class="hljs-attribute" style="box-sizing: border-box;">-ui</span>(
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'navigation'</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span>: transparent,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span><span class="hljs-attribute" style="box-sizing: border-box;">-over</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#505050</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span><span class="hljs-attribute" style="box-sizing: border-box;">-active</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#303030</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-gradient</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'none'</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-gradient</span><span class="hljs-attribute" style="box-sizing: border-box;">-over</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'none'</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-gradient</span><span class="hljs-attribute" style="box-sizing: border-box;">-active</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'none'</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#acacac</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span><span class="hljs-attribute" style="box-sizing: border-box;">-over</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#c4c4c4</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span><span class="hljs-attribute" style="box-sizing: border-box;">-active</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#fff</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-glyph</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#acacac</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-glyph</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span><span class="hljs-attribute" style="box-sizing: border-box;">-over</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#c4c4c4</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-glyph</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span><span class="hljs-attribute" style="box-sizing: border-box;">-active</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#fff</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-glyph</span><span class="hljs-attribute" style="box-sizing: border-box;">-opacity</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-border</span><span class="hljs-attribute" style="box-sizing: border-box;">-radius</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-border</span><span class="hljs-attribute" style="box-sizing: border-box;">-width</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-inner</span><span class="hljs-attribute" style="box-sizing: border-box;">-border</span><span class="hljs-attribute" style="box-sizing: border-box;">-width</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-padding</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">24</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-margin</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-font</span><span class="hljs-attribute" style="box-sizing: border-box;">-size</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-font</span><span class="hljs-attribute" style="box-sizing: border-box;">-size</span><span class="hljs-attribute" style="box-sizing: border-box;">-over</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-font</span><span class="hljs-attribute" style="box-sizing: border-box;">-size</span><span class="hljs-attribute" style="box-sizing: border-box;">-active</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">15</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-line</span><span class="hljs-attribute" style="box-sizing: border-box;">-height</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">19</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-font</span><span class="hljs-attribute" style="box-sizing: border-box;">-weight</span>: bold,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-font</span><span class="hljs-attribute" style="box-sizing: border-box;">-weight</span><span class="hljs-attribute" style="box-sizing: border-box;">-over</span>: bold,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-font</span><span class="hljs-attribute" style="box-sizing: border-box;">-weight</span><span class="hljs-attribute" style="box-sizing: border-box;">-active</span>: bold,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-icon</span><span class="hljs-attribute" style="box-sizing: border-box;">-width</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">24</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-icon</span><span class="hljs-attribute" style="box-sizing: border-box;">-height</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">24</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-tab</span><span class="hljs-attribute" style="box-sizing: border-box;">-icon</span><span class="hljs-attribute" style="box-sizing: border-box;">-spacing</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>px,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-bar</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-color</span>: <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">#404040</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-bar</span><span class="hljs-attribute" style="box-sizing: border-box;">-background</span><span class="hljs-attribute" style="box-sizing: border-box;">-gradient</span>: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'none'</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-bar</span><span class="hljs-attribute" style="box-sizing: border-box;">-padding</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ui</span><span class="hljs-attribute" style="box-sizing: border-box;">-strip</span><span class="hljs-attribute" style="box-sizing: border-box;">-height</span>: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>
);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li></ul>

当看到以上的东西，一定会问，这是什么鬼？完全看不懂啊！先别慌，先打开Ext JS 6的API，找到Ext.tab.Panel的说明，然后在工具栏中找到CSS Mixins菜单，选择extjs-tab-panel-ui，就会看到下图说明了：

从图中的说明可以了解到，“$ui”定义的是UI的名字，“$ui-tab-background-color”就是标签的背景颜色……

根据模板给的示范，是否会觉得：其实修改Ext JS 6的样式也不算太难呢？
我的意见是不太难，难的在于入门，呵呵。

在主视图的定义中，还有2个比较特别的配置项：responsiveConfig和defaults和。他们又有什么作用呢？

在API中直接搜索responsiveConfig并切换到Ext.mixin.Responsive类，就可以知道，该配置项的作用是在指定条件下将应用怎样的显示，主视图中的定义说明，在竖向显示的时候，标题栏将显示在顶部，而在横向显示的时候，则显示在左边。

配置项defaults的作用是用来指定子组件的默认配置的，也就是说，在标签面板创建子组件的时候，会把defaults中的配置项应用到子组件中。根据defaults中的配置项，可以了解到，标签页的内容区域将会向内收缩20个像素（bodyPadding），而每个标签页的标签（tabConfig）将应用插件Ext.plugin.Responsive，这样，就可以实现在显示是横向的时候，标签将显示在左边，显示是竖向的时候，标签显示在顶部，而且宽度固定为120像素。

由于当前项目只基于PC端，因而这两个配置项对当前项目来说意义不大，可以删除。

接下来修改一下标签页，在当前项目需要用到三个标签页：用户管理、文章管理和图片管理。具体修改代码如下：

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">items</span>: [
        {
            title: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'用户管理'</span>,
            iconCls: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fa-user'</span>
        },
        {
            title: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'文章管理'</span>,
            iconCls: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fa-file-text-o'</span>,
        },
        {
            title: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'图片管理'</span>,
            iconCls: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fa-photo'</span>,
        }
    ]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

这时候如果刷新浏览器，可能会出现乱码的情况，这是因为页面的代码页不是Unicode的，因为需要修改一下文件的代码页。在Visual Studio中，可在文件菜单中选择“高级保存选项”，然后如下图那样，将编码设置为Unicode，再保存就行了。

现在刷新浏览器，可看到如下图的效果：

今天就说到这了，有什么问题或疑问，请加入qq交流群391747779 进行咨询。

你可能感兴趣的:(实例,Ext-JS-6)

四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
ES聚合分析原理与代码实例讲解光剑书架上的书大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
用Python实现读取统计单词个数程序媛了了 python 游戏 java
完整实例代码：fromcollectionsimportCounterdefpythonit():danci={}withopen("pythonit.txt","r",encoding="utf-8")asf:foriinf:words=i.strip().split()forwordinwords:ifwordnotindanci:danci[word]=1else:danci[word]+=
C++ lambda闭包消除类成员变量 barbyQAQ c++c++java 算法
原文链接：https://blog.csdn.net/qq_51470638/article/details/142151502一、背景在面向对象编程时，常常要添加类成员变量。然而类成员一旦多了之后，也会带来干扰。拿到一个类，一看成员变量好几十个，就问你怕不怕？二、解决思路可以借助函数式编程思想，来消除一些不必要的类成员变量。三、实例举个例子：classClassA{public:...intfu
阿里云服务器4核8G配置购买及价格类文章汇总（10篇）阿里云最新优惠和活动汇总
阿里云服务器4核8G配置如何购买？价格是多少？4核8G配置的阿里云服务器可以通过云服务器产品页购买也可以通过阿里云活动去下单购买，一般通过活动购买的用户比较多，但是不同实例规格的阿里云服务器价格不一样，带宽不同价格也不一样，本文为大家汇总了10篇关于阿里云服务器4核8G配置购买教程文章和价格类文章，分为购买类文章和价格类文章，以供大家参考如何购买阿里云服务器4核8G配置和最新优惠价格是多少。阿里云
Python编程 - 初识面向对象易辰君 Python核心编程 python 开发语言
目录前言一、面向对象二、类和对象（一）类简介定义类（二）对象简介创建对象（三）总结三、实例属性和实例方法（一）实例属性创建的基本语法使用示例（二）实例方法定义实例方法的基本语法调用示例方法的示例（三）总结四、类中的self（一）基本概念（二）作用访问实例属性调用其他实例方法在构造函数中初始化对象（三）总结五、__init__方法（一）__init__方法的特点（二）基本语法（三）示例（四）总结前言
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
【java】怎么理解不同对象实例的对象锁是互不干扰的晨春计 Android java
在Java中，synchronized关键字用于实现线程同步，它可以作用于实例方法、静态方法以及代码块。当synchronized应用于实例方法或实例变量时，它创建的是一个对象锁，这个锁是与特定的对象实例关联的。因此，每个对象实例都有其自己的锁。这里的关键点在于，对象锁是绑定到特定对象实例上的。这意味着对于不同的对象实例，即使它们属于同一个类，它们各自拥有独立的对象锁。当一个线程获取了一个对象实例
C#动态加载DLL程序集及使用反射创建实例-简记不全 C#相关 Asp.net WebForm Asp.net MVC c#Assembly 反射程序集
Assembly动态加载程序集：分两种情况：1、需要加载的程序集已经在程序中被引用了，则直接从当前程序域中查找即可：Assemblyassembly=AppDomain.CurrentDomain.GetAssemblies().FirstOrDefault(x=>x.GetName().Name.Contains("theAssemblyName"));2、需要加载的程序集未被加载，则使用程序集
六、全局锁和表锁：给表加个字段怎么有这么多阻碍 nieniemin
数据库锁设计的初衷是处理并发问题。作为多用户共享的资源，当出现并发访问的时候，数据库需要合理地控制资源的访问规则。而锁就是用来实现这些访问规则的重要数据结构。根据加锁的范围，MySQL里面的锁大致可以分成全局锁、表级锁和行锁三类。6.1全局锁全局锁就是对整个数据库实例加锁。MySQL提供了一个加全局读锁的方法，命令是Flushtableswithreadlock(FTWRL)。当你需要让整个库处于
linux下好用的任务管理器htop WittXie Linux linux 服务器运维
给大家推荐个好用的任务管理器htop，简直好用的不得了。完虐top。不解释了，看文章！！！在Linux系统中，top命令用来显示系统中正在运行的进程的实时状态，它显示了一些非常有用的信息，比如CPU利用情况、内存消耗情况，以及每个进程情况等。但是，你知道吗？还有另外一个命令行工具'htop'，它与传统的top命令功能一样，但它有更加强大的功能及能显示更多的信息。这篇文章，我们会用实例来讨论这个'h
maven-assembly-plugin 打包实例带着二娃去遛弯
1.先在pom.xml文件中添加assembly打包插件org.apache.maven.pluginsmaven-assembly-plugin2.6assembly/assembly.xmlmake-assemblypackagesingle说明:1.需要修改的可能就是descriptors标签下面的打包配置文件目录,指定assembly.xml的路径.2.可以添加多个打包配置文件,进行多种形
Cut, Paste and Learn方法解读 wangxinwei2000 深度学习人工智能
Abstract问题背景：标注数据的缺乏：在实例检测任务中，部署物体检测模型的一个主要障碍是缺乏大量标注数据。例如，在一个特定的厨房环境中找到包含实例的大型标注数据集是不太可能的。每当面对新的环境和新的物体实例时，都需要进行昂贵的数据收集和标注工作。研究贡献：解决方法：本文提出了一种简单的方法，可以以最小的努力生成大量标注的实例数据集。关键洞察：研究者的关键洞察是，仅仅确保“局部真实感”（patc
阿里云服务器4核8G配置可选实例规格及最新优惠价格表（2023最新）阿里云最新优惠和活动汇总
阿里云4核8G服务器有十几种实例规格可选，其中计算型c7、通用算力型u1和计算优化型c7（国外地域）三种实例规格有优惠，其中计算型c7实例4核8G配置1M带宽优惠价格为3127.61元1年、5M带宽优惠价格为3862.01元1年；通用算力型u1实例4核8G配置1M带宽1367.86元1年、5M带宽优惠价格为1735.06元1年；计算优化型c7（国外地域）实例4核8G配置1M带宽5907.19元1年
[面试高频问题]关于多线程的单例模式朱玥玥要每天学习 java 单例模式开发语言
单例模式什么是设计模式?设计模式可以看做为框架或者是围棋中的”棋谱”,红方当头炮,黑方马来跳.根据一些固定的套路下,能保证局势不会吃亏.在日常的程序设计中,往往有许多业务场景,根据这些场景,大佬们总结出了一些固定的套路.按照这个套路来实现代码,也不会吃亏.什么是单例模式,保证某类在程序中只有一个实例,而不会创建多份实例.单例模式具体的实现方式:可分为”懒汉模式”,”饿汉模式”.饿汉模式类加载的同时
Three.js AnimationUtils 和 AnimationObjectGroup 灵魂清零 three 前端 web3 javascript
AnimationObjectGroup接收共享动画状态的一组对象。在使用手册的“下一步”章节中，“动画系统”一文对three.js动画系统中的不同元素作出了概述用法:将本来要作为根对象传入构造器或者动画混合器(AnimationMixer)的clipAction方法中的对象加入组中，并将这个组对象作为根对象传递。注意，这个类的实例作为混合器中的一个对象，因此，必须对组内的单个对象做缓存控制。限制
华为云分布式缓存服务DCS与开源服务差异对比 hcinfo_18 redis使用华为云 Redis5.0 分布式缓存服务 Redis客户端
分布式缓存服务DCS提供单机、主备、集群等丰富的实例类型，满足用户高读写性能及快速数据访问的业务诉求。支持丰富的实例管理操作，帮助用户省去运维烦恼。用户可以聚焦于业务逻辑本身，而无需过多考虑部署、监控、扩容、安全、故障恢复等方面的问题。DCS基于开源Redis、Memcached向用户提供一定程度定制化的缓存服务，因此，除了拥有开源服务缓存数据库的优秀特性，DCS提供更多实用功能。一、与开源Red
从简单到复杂：三种工厂模式的对比与应用技术拾光者设计模式 java 设计模式简单工厂模式抽象工厂模式工厂方法模式
在软件设计中，创建型设计模式用于处理对象创建的复杂性。本文将对比三种常见的创建型设计模式：简单工厂模式、工厂方法模式和抽象工厂模式。一，简单工厂模式定义：简单工厂模式（SimpleFactoryPattern）定义了一个工厂类，该类可以根据传入的参数决定创建哪一种产品实例。结构：产品（Product）：定义产品的接口。具体产品（ConcreteProduct）：实现具体产品。工厂（Factory）
Python静态方法@staticmethod和类方法@classmethod 西北小生_
Python静态方法@staticmethod和类方法@classmethod经常出现在类的定义中，二者和常规实例方法之间有什么区别呢？先看例子：classA:cnt=0val=1def__init__(self,cnt=0,val=1):self.val=valA.cnt+=1defnormal_fun(self,x):print(x+self.val)@classmethoddefget_cn
Spring Security定义多个过滤器链（10）小黑屋说YYDS spring
在SpringSecurity中可以同时存在多个过滤器链，一个WebSecurityConfigurerAdapter的实例就可以配置一条过滤器链。我们来看如下一个案例：@ConfigurationpublicclassSecurityConfig{@BeanUserDetailsServiceus(){InMemoryUserDetailsManagerusers=newInMemoryUser
Java内存模型基础 2401_84002271 程序员 java 学习经验分享
1.2Java内存模型的抽象结构Java中所有的实例域、静态域和数组元素都存储在堆内存中，堆内存在线程之间共享（文章中用“共享变量”指代）。局部变量(LocalVariables)、方法定义参数(FormalMethodParameters)和异常处理器参数(ExceptionHandlerParameters)不会在线程之间共享，它们不会存在内存可见性问题，因此也不受内存模型的影响。Java线程
Linux驱动开发-字符设备驱动开发可能只会写BUG linux linux驱动开发 c语言 linux 驱动开发运维
linux驱动开发1.驱动程序的类型2.驱动开发流程字符设备驱动1.基本概念2.字符设备驱动的基本结构架构字符设备驱动开发中常用的API示例以下代码加入了设备类和设备实例的创建linux驱动开发1.驱动程序的类型在Linux中，驱动程序主要有以下几种类型：字符设备驱动：处理字节流的设备，如串口、键盘等。它们通过字符设备接口（如/dev/tty）与用户空间进行交互。块设备驱动：处理块存储设备，如硬盘
Spring Boot 请求处理流程：从负载均衡到多实例并发 - 电子商务网站实例烟雨国度 spring boot 负载均衡后端
SpringBoot请求处理流程：从负载均衡到多实例并发-电子商务网站实例SpringBoot请求处理流程：从负载均衡到多实例并发SpringBoot作为一个强大的Java应用开发框架，能够有效地处理高并发请求。本文将基于三个关键流程图，详细分析SpringBoot应用如何从负载均衡到请求处理，再到多实例并发处理的整个过程。1.负载均衡和多实例处理首先，让我们看一下描述负载均衡和多实例处理的流程图
Axure移动端原型模板实例100+，APP原型设计模版，高保真高交互含大组件库默林工作室 AxureRP原型模板 axure 原型模板
作品概况页面数量：共100+页（长期更新中…）源文件格式：rp格式，兼容AxureRP9/10，非程序软件无源代码适用领域：APP、小程序、H5作品特色本品为「移动端原型模板实例100+」，属于APP+H5+小程序的页面实例原型模板，主要运用了中继器＋动态面板，栏目丰富样式多多，高保真高交互高复用（带仿真交互），可以快速组装成美观大方的原型图。该原型模板的页面尺寸为375×812像素，推荐演示设备
AI教你学Python 第5天：面向对象编程（OOP）基础凡人的AI工具箱 AI教你学Python python 开发语言人工智能 AIGC
第5天：面向对象编程（OOP）基础一、面向对象编程概述面向对象编程（OOP）是一种编程范式，使用“对象”来表示数据和数据上可用的操作。OOP的核心概念包括类、对象、继承、多态和封装。概念描述类一种蓝图，定义了对象的属性和方法。对象类的实例，包含具体的数据和方法。继承一个类可以继承另一个类的属性和方法，从而实现代码重用。多态同一操作作用于不同对象时，表现出不同的行为。封装把数据和操作数据的方法绑定在
6.Java面向对象第六章抽象类和接口懒洋洋大魔王 Java面像对象 java 开发语言
5.Java面向对象抽象类和接口文章目录5.Java面向对象抽象类和接口一、1.抽象类VS普通类2.抽象方法VS普通方法3.抽象类与抽象方法的使用二、接口1.必须知道的接口特性2.定义接口3.接口使用三、抽象类vs接口相同点不同点多用组合，少用继承针对接口编程针对扩展开放，针对改变关闭多用组合，少用继承针对接口编程针对扩展开放，针对改变关闭一、1.抽象类VS普通类抽象类不能被实例化但可以创建一个引
C语言学习 - continue跳转语句 Hyso
continue跳转语句的使用用于for循环语句、while循环语句、dowhile循环语句中，跳过本次循环中剩余的语句而执行下一次循环。continue跳转语句的实例：#includeintmain(coid){intsum=0;inti=1;while(i<=100){sum+=i;i++;if(i==50){continue;}printf("i=%d\n",i);}printf("sum=
如何在 Python 中声明一个静态属性? 潮易 python 开发语言
在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
注册中心 Nacos 异常实例需要30s才能剔除 Nacos心跳时间设置（踩坑） 2401_84046645 程序员 java 开发语言
instance.setPort(9999);Mapmetadata=newHashMap();//设置心跳的周期，单位为秒，这里将心跳间隔设置为3秒：metadata.put(PreservedMetadataKeys.HEART_BEAT_INTERVAL,“3000”);//设置心跳超时时间，单位为秒，这里将心跳超时时间设为6秒，//即服务端6秒收不到客户端心跳，会将该客户端注册的实例设为不
JavaScript 基础 - 第13天 +码农快讯+ JavaScript学习笔记 javascript 开发语言 ecmascript
文章目录JavaScript基础-第13天深入对象创建对象三种方式构造函数new实例化过程实例成员&静态成员实例成员静态成员一切皆对象内置构造函数ObjectArrayStringNumberJavaScript基础-第13天了解面向对象编程的基础概念及构造函数的作用，体会JavaScript一切皆对象的语言特征，掌握常见的对象属性和方法的使用。深入对象内置构造函数综合案例深入对象了解面向对象的基
apache ftpserver-CentOS config gengzg apache
<server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o
优化MySQL数据库性能的八种方法 AILIKES sql mysql
1、选取最适用的字段属性　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
JeeSite 企业信息化快速开发平台 Kai_Ge JeeSite
JeeSite 企业信息化快速开发平台平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
通过Spring Mail Api发送邮件 120153216 邮件 main
原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。【Spring Mail API】 Spring Mail API都在org.spri
Pysvn 程序员使用指南 2002wmj SVN
源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该
在SQLSERVER中查找被阻塞和正在被阻塞的SQL 357029540 SQL Server
SELECT R.session_id AS BlockedSessionID , S.session_id AS BlockingSessionID , Q1.text AS Block
Intent 常用的用法备忘 7454103 .net android Google Blog F#
Intent 应该算是Android中特有的东西。你可以在Intent中指定程序要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料。都指定好后，只要调用startActivity()，Android系统会自动寻找最符合你指定要求的应用程序，并执行该程序。下面列出几种Intent 的用法显示网页:
Spring定时器时间配置 adminjun spring 时间配置定时器
红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数
POJ 2421 Constructing Roads 最小生成树 aijuans 最小生成树
来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。代码： #include <iostream> #include <cstdio>
重构笔记——提取方法（Extract Method） ayaoxinchao java 重构提炼函数局部变量提取方法
提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。下面是我学习这个重构手法的笔记：提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
为UILabel添加点击事件 bewithme UILabel
默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。 UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
NoSQL数据库之Redis数据库管理(PHP-REDIS实例) bijian1013 redis 数据库 NoSQL
一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操
SecureCRT使用备注 bingyingao secureCRT 每页行数
SecureCRT日志和卷屏行数设置一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett
【Scala九】Scala核心三：泛型 bit1129 scala
泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr
素数与音乐 bookjovi 素数数学 haskell
由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
Java-Collections Framework学习与总结-IdentityHashMap BrokenDreams Collections
这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。简单的说，IdentityHashMap和HashM
读《研磨设计模式》-代码笔记-享元模式-Flyweight bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java
PS人像润饰&调色教程集锦 cherishLC PS
1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/ 新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
更新多个字段的UPDATE语句 crabdave update
更新多个字段的UPDATE语句 update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
hive实例讲解实现in和not in子句 daizj hive not in in
本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
一道24点的10+种非人类解法（2,3,10,10） dsjt 算法
这是人类算24点的方法？！！！事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。然后么。。。我就在深夜很得瑟的问室友求室友算刚出完题，文哥的暴走之旅开始了 5秒后
关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题 dcj3sjt126com yii framework
在使用 YIi的路径管理工具时，发现了一个问题。 <?php
对象与关系之间的矛盾：“阻抗失配”效应[转] come_for_dream 对象
概述 “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。 “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
学习编程那点事 gcq511120594 编程互联网
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
Reverse Linked List II hcx2013 list
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return
Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
Hadoop集群工具distcp liyonghui160com
1. 环境描述两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
一个备份MySQL数据库的简单Shell脚本 pda158 mysql 脚本
　　主脚本（用于备份mysql数据库）：　　该Shell脚本可以自动备份数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　
300个涵盖IT各方面的免费资源（中）——设计与编码篇 shoothao IT资源图标库图片库色彩板字体
A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。
thrift总结 - 跨语言服务开发 uule thrift
官网官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍 RPC POM： <dependency> <groupId>org.apache.thrift</groupId>

Ext JS 6开发实例（四） ：调整主视图

你可能感兴趣的:(实例,Ext-JS-6)

Ext JS 6开发实例（四）：调整主视图