Code:
Ext.onReady(function() {
Ext.app.REMOTING_API.enableBuffer = 100;
Ext.Direct.addProvider(Ext.app.REMOTING_API);
// provide feedback for any errors
Ext.tip.QuickTipManager.init();
Ext.define('PartInfo', {
extend: 'Ext.data.Model',
fields: [{name:'id',type:'int'}, 'name', 'size', 'location', 'cost'],
proxy: {
type: 'direct',
api: {
create: PartDatabase.addPart,
read: PartDatabase.getResults,
update: PartDatabase.updatePart,
destroy:PartDatabase.removePart
}
}
});
var store = Ext.create('Ext.data.Store', {
model: 'PartInfo',
autoLoad: true
});
var basicInfo = Ext.create('Ext.form.Panel', {
// configs for FormPanel
title: 'Basic Information',
border: false,
bodyPadding: 10,
// configs for BasicForm
api: {
// The server-side method to call for load() requests
load: Profile.getBasicInfo,
// The server-side must mark the submit handler as a 'formHandler'
submit: Profile.updateBasicInfo
},
// specify the order for the passed params
paramOrder: ['uid', 'foo'],
dockedItems: [{
dock: 'bottom',
xtype: 'toolbar',
ui: 'footer',
style: 'margin: 0 5px 5px 0;',
items: ['->', {
text: 'Submit',
handler: function(){
basicInfo.getForm().submit({
params: {
foo: 'bar',
uid: 34
}
});
}
}]
}],
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Name',
name: 'name'
},{
fieldLabel: 'Email',
msgTarget: 'side',
name: 'email'
},{
fieldLabel: 'Company',
name: 'company'
}]
});
// load the forms (notice the load requests will get batched together)
basicInfo.getForm().load({
// pass 2 arguments to server side getBasicInfo method (len=2)
params: {
foo: 'bar',
uid: 34
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
height: 450,
width: 700,
cls: 'grid',
title: 'Parts list',
store: store,
columns: [{
dataIndex: 'id',
width: 50,
text: 'ID'
}, {
dataIndex: 'name',
flex: 1,
text: 'Name',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
}, {
dataIndex: 'size',
flex: 1.3,
text: 'Size',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
},{
dataIndex: 'location',
flex: 1.3,
text: 'Location',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}
}, {
dataIndex: 'cost',
flex: 0.8,
text: 'Cost',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
// vtype: 'alphaSpace'
}
}],
renderTo: Ext.getBody(),
plugins: [
rowEditing
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
//creating, add items
items: [{
iconCls: 'add',
text: 'Add',
handler: function() {
rowEditing.cancelEdit();
// create a blank record from PersonalInfo
var record = Ext.create('PartInfo');
//insert at top
store.insert(0, record);
//edit at row 0
rowEditing.startEdit(0, 0);
//store.load();
}},
{
iconCls: 'delete',
text: 'Delete',
handler: function() {
rowEditing.cancelEdit();
var sm = grid.getSelectionModel();
Ext.Msg.show({
title:'Delete Record?',
msg: 'You are deleting a record permanently, this cannot be undone. Proceed?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if(btn === 'yes') {
store.remove(sm.getSelection());
store.sync();
}
}
});
}
}, basicInfo]
}]
});
grid.on('edit', function(e) {
console.log(e);
e.context.record.save();
//store.load();
store.update();
store.load();
});
});
Thanks in advance