Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{ name: 'projectId', type: 'string' },
{ name: 'project', type: 'string' },
{ name: 'taskId', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'estimate', type: 'string' },
{ name: 'rate', type: 'string' },
{ name: 'cost', type: 'string' },
{ name: 'due', type: 'string' }
]
});
var data = [
{ projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due: '06/24/2007' },
{ projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due: '06/25/2007' },
{ projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due: '06/29/2007' },
{ projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due: '07/01/2007' },
{ projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due: '07/04/2007' },
{ projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due: '07/05/2007' },
{ projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due: '07/05/2007' },
{ projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due: '07/11/2007' },
{ projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due: '07/15/2007' }
];
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
var store = Ext.create('Ext.data.Store', {
model: 'Task',
data: data,
groupField: 'project'
});
var cellEditing123 = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,//行内编辑 双击
clicksToMoveEditor: 1,//点击编辑按钮编辑
autoCancel: false
});
var showSummary = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 900,
height: 450,
frame: true,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body,
store: store,
plugins: [cellEditing123],
//dockedItems: [{
// dock: 'top',
// xtype: 'toolbar',
// items: [{
// tooltip: 'Toggle the visibility of the summary row',
// text: 'Toggle Summary',
// enableToggle: true,
// pressed: true,
// handler: function () {
// var view = grid.getView();
// showSummary = !showSummary;
// view.getFeature('group').toggleSummaryRow(showSummary);
// view.refresh();
// }
// }]
//}],
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
}],
columns: [ {
header: 'Due Date',
width: 280,
sortable: false,
dataIndex: 'due',
menuDisabled: true,
editor: {
allowBlank: true
}
}, {
header: 'Project',
width: 180,
sortable: false,
menuDisabled: true,
dataIndex: 'project'
}, {
header: 'Estimate',
width: 275,
sortable: false,
dataIndex: 'estimate',
menuDisabled: true,
editor: {
allowBlank: true
}
},
{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: '../../../lib/Ext/img/edit.gif',
tooltip: '编辑',
scope: this,
handler: function (grid, rowIndex) {
cellEditing123.cancelEdit();
cellEditing123.startEdit(rowIndex, 0);
}
}]
},
{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: '../../../lib/Ext/img/delete.gif',
tooltip: '删除',
scope: this,
handler: function (grid, rowIndex) {
Ext.MessageBox.confirm('Confirm', '确定删除该记录?', function (btn) {
if (btn != 'yes') {
return;
}
var SelectionModel = grid.getSelectionModel();
SelectionModel.select(rowIndex);
var store = grid.getStore();
store.remove(SelectionModel.getSelection());
})
}
}]
}]
});
});效果：