EXTJs操作列圖標

-1

我希望圖標在點擊時從接受更改爲刪除。設置iconflag = 1，因爲在頁面加載時我希望看到接受圖標。EXTJs操作列圖標

下面的代碼不滿足期望

{ 

             xtype: 'actioncolumn', 
             width:30, 
             items: [{ 
              flex : 1, 
              tooltip: 'Click to expand', 
              icon : iconflag == '1' ? "shared/icons/fam/accept.gif" : "shared/icons/fam/delete.gif", 
              getClass: this.getActionClass, 
             handler: function(){ 
              if(iconflag == '1'){iconflag = '0';} 
              else if(iconflag == '0'){iconflag = '1';} 
              alert(iconflag); 
             } 
             }] 

            },

使用ExtJS的4.2

來源

2017-05-24 BhandariS

在處理函數中，iconflag是失去處理函數以外的值的局部變量。在處理函數外部使用iconflag的地方，在你點擊圖標之前，它只被評估一次。

你想要做的就是將你的變量存儲在一個自動強制更新網格的地方。這就是爲什麼您要將圖標標記存儲在商店的記錄中的原因。

添加到您的模型的另一個領域：

{ 
    name: 'iconflag', 
    type: 'bool', 
    defaultValue: false, 
    persist: false 
}

移動圖標到CSS：

Ext.util.CSS.createStyleSheet([ 
    '.iconflag-accept {', 
    '  background-image: url(\'shared/icons/fam/accept.gif\')', 
    '}', 
    '.iconflag-delete {' 
    ' background-image: url(\'shared/icons/fam/delete.gif\')', 
    '}' 
].join(''));

更新使用該字段的列：

dataIndex: 'iconflag', 
getClass: function(iconflag) { 
    if(iconflag) return 'iconflag-delete'; 
    else return 'iconflag-accept'; 
}, 
handler: function(view, colindex, rowindex, item, e, record) { 
    record.set('iconflag', !record.get('iconflag')); 
}

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/205l

來源

2017-05-24 05:06:03 Alexander

can th是在沒有使用商店的情況下完成的？ – BhandariS

由於您要顯示的每個網格行都基於商店記錄，因此該商店是您最好的選擇。當然還有其他方法;它們只是大約3到20倍的代碼，在框架升級過程中可能需要重新編寫代碼，對於其他程序員來說這些代碼不會很容易理解。所提供的代碼是標準問題ExtJS代碼，適用於4.2.0和6.5之間的所有ExtJS版本 - 經典版本，推測也適用於未來的版本。 – Alexander

EXTJs操作列圖標

回答

相關問題