當我隱藏帶圖像的列時，網格行不會改變高度

Ext JS 4.0.2。我有網格，每一行都有顯示圖像的列（100x100）。當網格呈現每行有高度約120px。當我用圖像隱藏列時，我想改變行的高度，使它們具有一條文本行的高度。怎麼做？我看着http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.column.Column-cfg-hideMode，但它沒有做我想要的。當我隱藏帶圖像的列時，網格行不會改變高度

更新代碼：

Ext.onReady(function() { 


var myData = [ 
    ['3m Co','logo-small.png'], 
    ['Alcoa Inc','logo-small.png'], 
    ['Altria Group Inc','logo-small.png'] 
]; 


// create the data store 
var store = Ext.create('Ext.data.ArrayStore', { 
    fields: [ 
     {name: 'company'}, 
     'url' 
    ], 
    data: myData 
}); 

// create the Grid 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    stateId: 'stateGrid', 
    columns: [ 
     { 
      text  : 'Company', 
      flex  : 1, 
      dataIndex: 'company' 
     } , 
     { 
      text  : 'Image', 
      width: 200, 
      hidden: true, 
      hideMode: 'display', 
      renderer : function(value){ 
       return '<img src="'+value+'">'; 
      }, 
      dataIndex: 'url' 
     } 

    ], 
    height: 350, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'grid-example', 
    viewConfig: { 
     stripeRows: true 
    } 
}); });

當列是隱藏的每一行有尚足夠的高度來顯示圖像，我希望他們有高度，就像沒有圖像列

Ext.onReady(function() { 
var myData = [ 
    ['3m Co','logo-small.png'], 
    ['Alcoa Inc','logo-small.png'], 
    ['Altria Group Inc','logo-small.png'] 
]; 


// create the data store 
var store = Ext.create('Ext.data.ArrayStore', { 
    fields: [ 
     {name: 'company'}, 
     'url' 
    ], 
    data: myData 
}); 

// create the Grid 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    stateId: 'stateGrid', 
    columns: [ 
     { 
      text  : 'Company', 
      flex  : 1, 
      dataIndex: 'company' 
     } 

    ], 
    height: 350, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'grid-example', 
    viewConfig: { 
     stripeRows: true 
    } 
}); });

來源

2011-08-18 Dariusz Pawusiak

你能分享你的代碼嗎？ – Unknown

你已經試圖改變圖像的CSS？像'z-index'，或者'position' ... –

我沒有試過這個。我想知道extjs中是否有簡單/優雅的解決方案，而不需要更改圖像樣式或擴展網格組件。 –

這個問題相當古老，但我認爲我的答案可能有助於某人。

Ext.onReady(function() { 
var myData = [ 
    {company: '3m Co',url: 'logo-small.png'}, 
    {company: 'Alcoa Inc',url: 'logo-small.png'}, 
    {company: 'Altria Group Inc',url: 'logo-small.png'} 
]; 


// create the data store 
var store = Ext.create('Ext.data.Store', { 
    fields: [ 
     'company', 
     'url' 
    ], 
    data: myData 
}); 

// create the Grid 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    stateId: 'stateGrid', 
    columns: [ 
     { 
      text  : 'Company', 
      flex  : 1, 
      dataIndex: 'company' 
     } , 
     { 
      text  : 'Image', 
      flex: 1, 
      renderer : function(value){ 
       return '<img src="'+value+'">'; 
      }, 
      dataIndex: 'url' 
     } 

    ], 
    height: 350, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'grid-example', 
    listeners: { 
     columnhide: function(a, b, c) { 
      var cell = this.getEl().query('.x-grid-cell'); 
      for(var i = 0; i < cell.length; i++) { 
       if (i%2 != 0) 
        cell[i].style.display = "none"; 

      } 
     } 
    }, 
    viewConfig: { 
     stripeRows: true 
    } 
}); 
});

由於ExtJS的不提供一種方式，網格與行直接溝通，我嘗試查詢行，然後修改DOM。

當然，當顯示圖像列時會反過來。

來源

2012-04-25 16:30:16

當我隱藏帶圖像的列時，網格行不會改變高度

回答

相關問題