Bir veri kılavuzundaki satırlara nasıl özel CSS sınıfları eklerim (Ext.grid.Panel)?ExtJS'de, veri ızgara satırlarına özel bir CSS sınıfı nasıl eklenir?
ExtJS 4.0 kullanıyorum. Tabii ki başka hücre için getRow() çağrısını yerine olabilir
Ext.fly(myGrid.getView().getRow(0)).addClass('myClass');
veya could döngü satırlarınız tüm aracılığıyla ve uygun biçimde ekleyin:
o ızgarada viewConfig tanımlamaktır yapmanın yolu: Daha sonra, özel css dosyası gibi bir şey içerecektir sizin ızgara kullanımda
Ext.create('Ext.grid.Panel', {
...
viewConfig: {
getRowClass: function(record, index, rowParams, store) {
return record.get('someattr') === 'somevalue') ? 'someclass' : '';
}
},
...
});
Ayrıca belgelere bakın: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view.Tablo-yöntem-getRowClass –
Böyle bir şey yapabilirdi.
Ve sonra yaparak, varsayılan CSS ek olarak bu stil olabilir:
.x-grid3-row-selected .myClass {
background-color: blue !important;
}
da addRowClass denilen GridView özel bir yöntem yoktur. Sen yaparak hem sizin satırlara bir sınıf eklemek için kullanabilir:
grid.getView().addRowClass(rowId, 'myClass');
// private - use getRowClass to apply custom row classes
addRowClass : function(rowId, cls) {
var row = this.getRow(rowId);
if (row) {
this.fly(row).addClass(cls);
}
},
sizin Ext.grid.Panel kullanım getRowClass() listenizdekilerden initComponent() yılında şöyle:
initComponent: function(){
var me = this;
me.callParent(arguments);
me.getView().getRowClass = function(record, rowIndex, rowParams, store) {
if (/* some check here based on the input */) {
return 'myRowClass';
}
};
}
Bu temelde geçersiz kılar Herhangi bir özel sınıfın uygulanması için render zamanında çağrılan getRowClass() temelindeki Ext.grid.View işlevinin işlevi.
.myRowClass .x-grid-cell {background:#FF0000; }
Bu kesinlikle, Örnek olarak, getRowClass overrride için yaygın bir kullanım olan kayıt değerlerine dayanarak bir sınıf koşullu olarak uygulama yeteneği sağlar. – dougajmcdonald
Ayrıca, "initComponent" kullanmanın zorunlu yaklaşımı olmadan gridin 'viewConfig' yapılandırmasında getRowClass' tanımlamak güzel olduğunu öğrendim :) –
Bu önerilen yol değil, viewConfig kullanın, ilk cevabı görmek. –
kullanın basit yolu
-
cls: 'myRowClass'
Sizin css -
.myRowClass .x-grid-cell {background: # FF0000! Important; Veri yüklendikten sonra sınıfını değiştirmek isterseniz}
Bu kesinlikle sorulan değil. –
, bunu şöyle yapabiliriz: Burada
myGridPanel.getView().removeRowCls(rowIndex,"old class");
myGridPanel.getView().addRowCls(rowIndex,"new class");
, rowIndex gibi (bazı olay işlevlerinde alabilirsiniz seçilen satır vardır) "select". Bunu kullanarak, satırın CSS'sini tıkladıktan sonra değiştirebilirsiniz.
Bu soruya da bir göz atabilirsiniz: http://stackoverflow.com/questions/7471223/extjs-4-cell-renderer-problem/7476057#7476057 –