Ext经验分享(1)

最近（2017年10月26日）在开发MES项目。使用的是Ext3.3.1。
下图是我的需求（实际上是已经做好的）~

MPM1700—需求.png

需求是一个分栏页面，左侧为菜单栏，右侧是数据面板。要求根据用户在左侧选择的不同菜单，右侧改变为相应的数据面版。

在使用Ext编写这段需求时遇到了如下一些困难，逐一解决后，将经验在这里分享下。

经验一 ： 关于BorderLayout中增删组件

从需求中可以看出使用BORDER布局最为合适，west区域为菜单栏，准备使用Ext的Menu控件，center区域为数据面板。

使用中需要注意下面的这些问题（来自于Ext3 API）：

Notes:

• Any container using the BorderLayout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.
• Any child items with a region of west or east must have width defined (an integer representing the number of pixels that the region should take up).
• Any child items with a region of north or south must have height defined.
• The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel.

注意引文中的粗体字，即BorterLayout布局中，每个区域的组件不能删除或增加。我在开发中，一开始想的是在换菜单时，如从“计划缺料异常”点到“订单交期异常”，中间面板（centerPanel）的操作是，先删除所有组件。
this.removeAll();
再添加
this.add(...);
如上所述，这个做法是行不通的。中间的组件删除后，面板变空，任我如何添加，都不能把新的组件渲染到页面上去。

正确的做法，写在上文的斜体字中。即在Center区域中增加一个Panel。Layout为Auto,或者Box的等，只要不是Border的就行。然后将需要添加和删除的组件new到这个Panel的items里。

//这里定义centerPanel
this.centerPanel = new Ext.Panel({  
  id : 'centerPanel',  
  layout: {  
    type: 'hbox',  
    align: 'stretch'  
  },  
  region : 'center',
  renderTo: Ext.getCmp('main'),
  //item中的组件要重新New,传参会shallow copy
  items: [
    new rs.mpm.planImpStatus.planLackM.GridPanel({
      id : 'planLackMPanel',
      title : '计划缺料异常',
      flex: 100
    })
  ]
});

                 //这里是点击菜单事件的监听器
                 fn: function(item,e) {
                  // 点击某个菜单项,将该菜单项背景颜色加深
                  item.addClass('item_actived');
                  Ext.getCmp('orderDeliveryItem').removeClass('item_actived');
                  Ext.getCmp('preparationItem').removeClass('item_actived');
                  // 去除centerPanel中的面板，换成与该菜单项相对应的面板
                  this.centerPanel.removeAll();
                  this.centerPanel.add(
                    new rs.mpm.planImpStatus.planLackM.GridPanel({
                      id : 'planLackMPanel',
                      title : '计划缺料异常',
                    })
                 );
                 this.centerPanel.doLayout();
                }

在定义的centerPanel中，就可以完美的进行添加删除组件了。

经验二 ： 在Ext中添加样式，即使用CSS

Ext的组件都是封装过了，这样虽然使用起来方便，但是遇到特殊的需求时，比如说更改为某个特定的样式，这类问题就比较棘手。
例如，这个需求需要在点击后将按钮的背景颜色变深。CSS很好写：

        .x-menu-item.menu_item{
            color:black!important;
            font-size: larger;
         }
        .item_actived{
            background-color :#D0DEF0
        }
        .item_margin{
          margin-bottom: 10px
        }

ps:第一段CSS是设置菜单字体的。字体颜色的设置为了抵消掉项目中的maincss.css需要加上！important才能生效

问题的关键是如何正确使用CSS属性将这段CSS添加到正确的位置。因为你用EXT组件写前端，是接触不了HTML的嘛。
EXT代码：

this.menuPanel = new Ext.menu.Menu({
  region : 'west',
  width : 220,
  plain: true,
  floating: false,
  style : "padding-top:10px",
  items : [
    {
      id : 'planLackMItem',
      text: '计划缺料异常',
      //针对该菜单项的CSS 
      cls : 'menu_item',
      //针对包含菜单项的容器的CSS 

      ctCls : 'item_margin',
      listeners :
          ......

MENU菜单生成的HTML代码

整个Menu组件转化的HTML代码如上图所示，简要来说div中包含ul

<！-- Menu组件以DIV标签开始 -->
　　

　　　　
• 
  　　　　　　 <！-- 这里才是你定义的ITEM-->
  ．．．
  所以有的时候你需要在a标签上添加样式，但有的样式需要添加在li上，这分别要如何操作呢？

  Ext中对于一般组件来说，添加样式的属性有以下几种（以为Menu中的Item组件添加为例）
  1、style属性，这个属性会直接添加到a标签中。
  　　有两种写法，一种为JSON格式：

   {
        width: '95%',  
        marginBottom: '10px'
    }
  

  注意，此处的STYLE属性为EXT中定义的，并不和CSS相同。

  另一种写法为字符串式的
  "padding-top:10px"
  引号中的内容会直接加到对象的style属性中。这种方法操作起来很方便。

  2、cls属性
  这个属性的内容会添加到标签的class属性中，即其中写CSS的选择器的名字就可以了。对于item组件，即为标签的class属性。

  3、ctCls属性
  这个也是将属性内容添加到标签的class属性中，但与cls不同的是，添加到容器的标签。对于item组件，将添加到

• 标签的class属性中。

  4、itemCls属性
  这个属性和cls类似，但会直接改变标签中的内容，而不仅仅是添加。