Rownumberer 在 deleting/adding 行 ExtJS 4.1 之后没有按顺序出现
Rownumberer doesn't appear in sequence after deleting/adding row ExtJS 4.1
我有一个使用 rownumberer 的网格。但是如果我删除任何一行(最后一行除外),数字不会按顺序出现。我已经使用 grid.getView().refresh()
但它并没有解决我的问题。
请帮忙
var productHardwareGrid = Ext.create('Ext.grid.Panel', {
id: 'productHardwareGrid',
store: prodHardGridStore,
selModel: prodHardCheckBoxSelection,
frame: false,
loadMask: true,
stripeRows: true,
autoScroll: true,
preventRender: true,
tbar: [{
xtype: 'button',
text: 'Add Product',
id: 'addProductHW',
iconCls: "icon-grid-add",
handler: function () {
prodWinAdd('productHardwareGrid', 'HW');
}
},
{
xtype: 'button',
text: 'Delete Product',
iconCls: "icon-grid-delete",
handler: function () {
prodDelete('HW');
productHardwareGrid.getView().refresh();
},
id: 'prodHardDelBtn',
disabled: true
}
],
columns: [
{
xtype: 'rownumberer',
header: 'No',
defaults: {
align: 'center',
flex: 0,
width: 40,
sortable: false,
menuDisabled: true
}
},
渲染器又来拯救世界了。
var data = [];
for(var i=0;i<10; i++) {
data.push({name: i, age: 1});
}
Ext.application({
name: 'Fiddle',
launch: function () {
var store = new Ext.data.Store({
fields: ['name', 'age'],
data: data,
autoLoad: true,
pageSize: 10
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'grid',
id: "grid1",
columns: [{
xtype: 'rownumberer',
renderer: function (value, metaData, record, rowIdx, colIdx, store) {
var rowspan = this.rowspan;
if (rowspan) {
metaData.tdAttr = 'rowspan="' + rowspan + '"';
}
metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
return store.indexOf(record) + 1;
}
}, {
text: 'name',
dataIndex: 'name',
flex: 1
}, {
text: 'age',
dataIndex: 'age',
flex: 1
}],
store: store
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Delete 1st',
handler: function () {
store.removeAt(0);
var grid = Ext.getCmp('grid1');
grid.view.refresh();
}
}]
}]
});
}
});
我有一个使用 rownumberer 的网格。但是如果我删除任何一行(最后一行除外),数字不会按顺序出现。我已经使用 grid.getView().refresh()
但它并没有解决我的问题。
请帮忙
var productHardwareGrid = Ext.create('Ext.grid.Panel', {
id: 'productHardwareGrid',
store: prodHardGridStore,
selModel: prodHardCheckBoxSelection,
frame: false,
loadMask: true,
stripeRows: true,
autoScroll: true,
preventRender: true,
tbar: [{
xtype: 'button',
text: 'Add Product',
id: 'addProductHW',
iconCls: "icon-grid-add",
handler: function () {
prodWinAdd('productHardwareGrid', 'HW');
}
},
{
xtype: 'button',
text: 'Delete Product',
iconCls: "icon-grid-delete",
handler: function () {
prodDelete('HW');
productHardwareGrid.getView().refresh();
},
id: 'prodHardDelBtn',
disabled: true
}
],
columns: [
{
xtype: 'rownumberer',
header: 'No',
defaults: {
align: 'center',
flex: 0,
width: 40,
sortable: false,
menuDisabled: true
}
},
渲染器又来拯救世界了。
var data = [];
for(var i=0;i<10; i++) {
data.push({name: i, age: 1});
}
Ext.application({
name: 'Fiddle',
launch: function () {
var store = new Ext.data.Store({
fields: ['name', 'age'],
data: data,
autoLoad: true,
pageSize: 10
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
items: [{
xtype: 'grid',
id: "grid1",
columns: [{
xtype: 'rownumberer',
renderer: function (value, metaData, record, rowIdx, colIdx, store) {
var rowspan = this.rowspan;
if (rowspan) {
metaData.tdAttr = 'rowspan="' + rowspan + '"';
}
metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
return store.indexOf(record) + 1;
}
}, {
text: 'name',
dataIndex: 'name',
flex: 1
}, {
text: 'age',
dataIndex: 'age',
flex: 1
}],
store: store
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Delete 1st',
handler: function () {
store.removeAt(0);
var grid = Ext.getCmp('grid1');
grid.view.refresh();
}
}]
}]
});
}
});