Extjs Grid Form Detail Ajax
HTML
<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/extjs-build/resources/css/ext-all.css">
<script src="http://docs.sencha.com/extjs/4.1.3/extjs-build/ext-all-dev.js"></script>
`
JavaScript
Ext.Ajax.useDefaultXhrHeader = false;
// Enable CORS support on the XHR object. Currently the only effect of this option is to use the XDomainRequest object instead of XMLHttpRequest if the browser is IE8 or above.
Ext.Ajax.cors = true;
Ext.define('Ext.ux.form.Panel', {
extend: 'Ext.form.Panel',
/**
* Can be a reference to a model instance or a model class name.
*/
//model: null,
/**
* Set to the id of the model instance and the model will be loaded for you.
* Only applicable if model provided is a model class name (string).
*/
//modelId: null,
loadMask : true,
initComponent: function() {
this.callParent();
this.getForm().trackResetOnLoad = true; //Workaround
this.bindModel(this.model, this.modelId);
this.addEvents('loadsuccess', 'loadfailure', 'savesuccess', 'savefailure');
},
bindModel: function(model, modelId) {
if (Ext.isString(model)) {
//Load a model to be updated
if (modelId) {
this.model = Ext.ClassManager.get(model);
this.modelId = modelId;
this.setLoading(this.loadMask);
this.model.load(modelId, {
success: this.onModelLoadSuccess,
failure: this.onModelLoadFailure,
scope: this
});
//Load an empty record to be inserted
} else {
this.model = Ext.create(model, {});
this.loadRecord(this.model);
}
} else if (Ext.isObject(model)) {
this.model = model;
//Bind the provided model to be updated
this.loadRecord(model);
}
},
commit: function(callback, scope) {
if (this.form.isDirty()) {
this.form.updateRecord(this.getRecord());
this.model.save({
callback:...