カスタムレンダラーを備えた ExtJs EditorGridPanel があります。基本的な考え方は、項目を登録する必要がある場合はチェックボックスを表示し、項目が既に登録されている場合は Registered というテキストを表示することです。ヘッダーをクリックすると、グリッド全体が再レンダリングされ、すべてのセルがトグルすることを除いて、すべてが順調に機能しています。さらに、ソートは機能しません。すべてのチェックボックスがトグルしないように、ヘッダーがクリックされたことを確認するにはどうすればよいですか? 列の並べ替えを修正するにはどうすればよいですか? 現在、ソートされていません。よろしくお願いします。
var colModel = new Ext.grid.ColumnModel(
{
columns: [
{ id: 'ItemOid', header: "ItemOid", width: 100, sortable: true, locked: true, dataIndex: 'ItemOid', hidden: true },
{ id: 'nNumber', header: "N-#", width: 100, sortable: true, locked: true, dataIndex: 'NNumber' },
{ header: "Make", width: 150, sortable: true, dataIndex: 'Make' },
{ header: "Model", width: 150, sortable: true, dataIndex: 'Model' },
{ header: "Register",
width: 55,
sortable: true,
dataIndex: 'Register',
xtype: 'checkcolumn',
renderer: renderFunction
}
]
});
function renderFunction(value, metaData, record, rowIndex, colIndex, store) {
if (!store.getAt(rowIndex).data['ItemNeedsRegistered'])
return 'Registered';
var isRegistered = store.getAt(rowIndex).data['Registered'];
var renderString;
if (initialItemRender || isRegistered) {
renderString = '<input type="checkbox" id="chkRegistered' + rowIndex + '" />';
store.getAt(rowIndex).data['Registered'] = false;
} else {
renderString = '<input type="checkbox" checked="yes" id="chkRegistered' + rowIndex + '" />';
store.getAt(rowIndex).data['Registered'] = true;
}
return renderString;
}
var grid = new Ext.grid.EditorGridPanel({
store: itemStore,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 100,
split: true,
region: 'north'
});
これは、基になる値を更新しようとしても失敗する2回目の試みであり、チェックもチェックも解除されません。
function renderFunction(value, metaData, record, rowIndex, colIndex, store) {
if (!store.getAt(rowIndex).data['ItemNeedsRegistered'])
return 'Registered';
var isRegistered = store.getAt(rowIndex).data['Registered'];
var renderString;
if (initialItemRender || !isRegistered) {
renderString = '<input type="checkbox" id="chkRegistered' + rowIndex + '"'
+ ' onClick="updateStoreOnClick(' + rowIndex + ', true);"'
+ ' />';
} else {
renderString = '<input type="checkbox" checked="yes" id="chkRegistered' + rowIndex + '"'
+ ' onClick="updateStoreOnClick(' + rowIndex + ', false);"'
+ ' />';
}
return renderString;
}
function updateStoreOnClick(rowIndex, value) {
store.getAt(rowIndex).data['Registered'] = value;
}