2014-03-06 15 views
0

我在Ext JS的ActionColumn上遇到了一些困難,但這確實是一個單獨的問題。我現在想要做的是保存我使用Ext JS做的任何DOM操作,這樣當我刷新我的網格時,更改將保留。Ext JS:保存網格行的DOM操作

var grid = Ext.create('Ext.grid.Panel', { 
    columns: [{ 
     xtype: 'actioncolumn', 
     width: 50, 
     items: [{ 
      icon: 'http://cdn.sencha.com/ext/gpl/4.2.1/examples/personel-review/images/edit.png', 
      tooltip: 'Edit', 
      iconCls: 'hideable', 
      handler: function(grid, rowIndex, colIndex) { 
       alert('you clicked the edit icon'); 
      } 
     }] 
    }, { 
     text: 'Name', dataIndex: 'name' 
    }], 
    store: Ext.create('Ext.data.Store', { 
     fields: ['name'], 
     data: [{ 
      name: 'Me' 
     }, { 
      name: 'You' 
     }, { 
      name: 'Mulder' 
     }] 
    }), 
    renderTo: Ext.getBody() 
}); 

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     var view = grid.getView(); 
     var rowHtml = view.getNode(1); 
     console.log(view); 
     var rowDom = Ext.get(rowHtml); 
     var placeHolder = rowDom.down('.hideable'); 
     placeHolder.hide(); 
     setTimeout(function() { 
      // This makes my DOM change go away... how to save the hide in the grid's HTML? 
      grid.getView().refresh(); 
     }, 1000); 
    } 
}); 

Sencha Fiddle.當你加載這個小提琴,你會看到第二行的鉛筆圖標將被隱藏,但在1秒鐘之後,它會重新出現。它會重新出現,因爲我刷新了網格的視圖,但它應該被保存起來才能隱藏。我該如何做到這一點?我做錯了什麼/不理解?

而且,這是很好的注意使用getClass or isDisabled功能不會做,因爲我的觀點已經呈現。我只是將刷新用作未保存更改的示例。

回答

1

這是一種正常的行爲,該圖標重新出現東陽刷新功能將重新繪製基於其初始配置來看,至極不是由您的DOM操作修改。我會建議的是添加一個布爾字段到你的商店,這將保持你的按鈕的可見性狀態。然後,您只需修改記錄的值,並保持按鈕的可見性。

+0

這就是我所害怕的。我不想修改記錄只是爲了添加按鈕的狀態,因爲這些信息並不屬於記錄。 – incutonez

+0

這就是我最終做的......使用ActionColumn的[項目]的getClass(http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action -cfg項)。 – incutonez