2014-01-08 16 views
2

我是新來的Extjs 4.2,當我工作extjs 3.4我使用了groupheader插件。現在我有問題與網格中的列標題。我寫了4個級別的列,並且對最後一級子列有問題。他們的身高評估不正確。請幫助。
問題視圖

Jsfiddle
網格組標題孩子列評估不正確

 
+------------------------------------------------+-------------------------------------------------------+ 
|     Column 1      |      Column 2       | 
+-----------------------+------------------------+------------------------------+------------------------- 
|  col11   | col12    |   col21    |  col22   | 
+-----------------------+------------------------+------------------------------+------------------------+ 
| col111 | col112 | col121 | col122 |  col211 |  col212 |    |   | 
+------------------------------------------------+------------------------------| col221 | col222 | 
|   problem  space     | c2111 | c2112 | c2121 | c2122|    |   | 
+------------------------------------------------+-------+-------+_------+------+-------------+----------+ 
|                          | 
|                          | 
|         store  data              | 
|                          | 
|                          | 
+--------------------------------------------------------------------------------------------------------+ 

如果去除列2,列將是正確的,列1包含3級,列2包含4個層次,這就是爲什麼列1被渲染不正確,請給我幫助,如果你可以,如何解決這個問題,我在Google上搜索這個問題的時間很多,但沒有找到答案。
這是電網

Ext.define("ValyutaApp.view.revenue.Republic", { 
    extend: "Ext.grid.Panel", 
    requires: [ 
     "Ext.toolbar.Paging", 
     "Ext.ux.grid.FiltersFeature", 
     "Ext.form.field.Date", 
     "Ext.grid.feature.Summary" 
    ], 
    alias: "widget.revenue-republic", 
    store: "ValyutaApp.store.revenue.Republic", 
    initComponent: function() { 
     var me = this; 
     me.features = me.buildFeatures(); 
     me.columns = me.buildColumns(); 
     me.dockedItems = me.buildDockedItems(); 
     me.callParent(arguments); 
    }, 
    buildFeatures: function() { 
     return {ftype: "summary"}; 
    }, 
    buildColumns: function() { 
     return [ 
      { 
       text: "Шундан", 
       menuDisabled: true, 
       columns: [ 
        { 
         text: "Микрофирма ва кичик корхоналар", 
         menuDisabled: true, 
         columns: [ 
          { 
           text: "Сони", 
           dataIndex: "MFMPSONI", 
           width: 80, 
           //xtype: "numbercolumn", 
           align: "right", 
           summaryType: "sum" 
          }, 
          { 
           text: "Суммаси", 
           dataIndex: "MFMPSUM", 
           width: 120, 
           xtype: "numbercolumn", 
           align: "right", 
           summaryType: "sum" 
          } 
         ] 

        }, 
        { 
         text: "Микрофирма ва кичик корхоналар тоифасига кирмайдиган", 
         menuDisabled: true, 
         columns: [ 
          { 
           text: "Сони", 
           dataIndex: "KFSONI", 
           width: 80, 
           //xtype: "numbercolumn", 
           align: "right", 
           summaryType: "sum" 
          }, 
          { 
           text: "Суммаси", 
           dataIndex: "KFSUM", 
           width: 120, 
           xtype: "numbercolumn", 
           align: "right", 
           summaryType: "sum" 
          } 
         ] 
        } 
       ] 
      }, 
      { 
       text: "Шу жумладан: Имтиёзлар турлари сони ва суммаси", 
       menuDisabled: true, 
       columns: [ 
        { 
         text: "ВМнинг 245-сонли карорига асосан", 
         menuDisabled: true, 
         columns: [ 
          { 
           text: "3-а бандига мувофик", 
           menuDisabled: true, 
           columns: [ 
            { 
             text: "Сони", 
             dataIndex: "LG3ASONI", 
             width: 80, 
             //xtype: "numbercolumn", 
             align: "right", 
             summaryType: "sum" 
            }, 
            { 
             text: "Суммаси", 
             dataIndex: "LG3ASUM", 
             width: 120, 
             xtype: "numbercolumn", 
             align: "right", 
             summaryType: "sum" 
            } 
           ] 
          }, 
          { 
           text: "3-б бандига мувофик", 
           menuDisabled: true, 
           columns: [ 
            { 
             text: "Сони", 
             dataIndex: "LG3BSONI", 
             width: 80, 
             //xtype: "numbercolumn", 
             align: "right", 
             summaryType: "sum" 
            }, 
            { 
             text: "Суммаси", 
             dataIndex: "LG3BSUM", 
             width: 120, 
             xtype: "numbercolumn", 
             align: "right", 
             summaryType: "sum" 
            } 
           ] 
          } 
         ] 
        }, 
        { 
         text: "Берилган имтиёзлар", 
         menuDisabled: true, 
         columns: [ 
          { 
           text: "Сони", 
           dataIndex: "LGHUKSONI", 
           width: 80, 
           //xtype: 'numbercolumn', 
           align: 'right', 
           summaryType: 'sum' 
          }, 
          { 
           text: "Суммаси", 
           dataIndex: "LGHUSUM", 
           width: 120, 
           xtype: 'numbercolumn', 
           align: 'right', 
           summaryType: 'sum' 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    }, 
    buildDockedItems: function() { 
     return [ 
      { 
       xtype: "toolbar", 
       dock: "top", 
       items: [ 
        { 
         text: "Excel", 
         iconCls: "excel-icon", 
         action: "excel" 
        }, 
        " Период: ", 
        { 
         xtype: "datefield", 
         name: "period", 
         width: 120 
        }, 
        { 
         iconCls: "ok-icon", 
         action: "ok" 
        } 
       ] 
      }, 
      { 
       xtype: "pagingtoolbar", 
       dock: "bottom", 
       store: this.store, 
       displayInfo: true 
      } 
     ]; 
    } 

}); 

此代碼是窗口

Ext.define("ValyutaApp.view.revenue.Area",{ 
    extend: "Ext.window.Window", 
    alias: "widget.revenue-area", 
    title: "Тушум тугрисида МАЪЛУМОТ", 
    width: 700, 
    height: 400, 
    autoScroll: true, 
    closable: true, 
    closeAction: 'hide', 
    maximizable: true, 
    layout:'fit', 
    items: [{ 
     xtype: 'revenue-republic' 
    }] 
}); 


感謝您的幫助的代碼!

+0

你能否提供一個jsfiddle的例子或至少一個結果截圖 –

+0

請問我已經加了jsfiddle –

回答

0

我對你有一個解決方法。添加style到前四列:

style: "padding-top: 6px; padding-bottom: 5px;" 

這是不是很優雅,但你可以使用它,直到你找到問題出在哪裏得來的。結果如下:jsfidle

+0

Darin,非常感謝你的回答!你的答案非常有用,我希望找到問題的核心 –