Ext.onReady(function () {
Ext.define('Ext.ux.DeleteButton', {
extend: 'Ext.button.Button',
alias: 'widget.delbutton',
text: 'Remove Selected Record',
handler: function () {
var grid = this.up('grid');
if (grid) {
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'No Records Selected');
return;
}
Ext.Msg.confirm('Remove Record', 'Are you sure?', function (button) {
if (button == 'yes') {
grid.store.remove(rs[0]);
}
});
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
width: 500,
tbar: [{ xtype: 'delbutton'}],
store: {
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
},
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
renderTo: 'output'
});
});
How To Make Every Grid Able To Create It's Own Store Instance? - Part 2
Ext.onReady(function () {
Ext.define('App.MyStore', {
extend: 'Ext.data.Store',
fields: ['name', 'email', 'phone'],
data: [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
]
});
Ext.define('App.MyForm', {
extend: 'Ext.window.Window',
alias: 'widget.myform',
title: 'Simpsons',
width: 500,
layout: 'fit',
initComponent: function () {
var store = Ext.create('App.MyStore');
this.items = [{
xtype: 'grid',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
}];
this.callParent(arguments);
}
});
Ext.widget('button', {
text: 'First Test Grid',
renderTo: 'output',
handler: function () {
Ext.widget('myform', {
title: 'First Test Grid',
border: false,
autoShow: true
});
}
});
Ext.widget('button', {
text: 'Second Test Grid',
renderTo: 'output',
handler: function () {
Ext.widget('myform', {
title: 'Second Test Grid',
border: false,
autoShow: true
});
}
});
