PDA

View Full Version : how can i send an ajax request from row-editor's Grid ... ?



masoud_tamizy
29 Jan 2012, 11:23 PM
i have an grid that have a row-editor , and i want when focus lost from one of textfields in my grid[row-editor] for example user_id , the value of this field to be sent to server for unique test ...
how can i do with this Ajax sending request ?
i saw a sample here : (i need it but for grid-edit)
http://www.superdit.com/2010/05/07/unique-field-form-validation-using-php-and-extjs/

Farish
29 Jan 2012, 11:51 PM
you can use this code when you lose focus:


Ext.Ajax.request({
url: '__yourURL__&ID=' + ID, // you can append your parameter to the URL
params: { /* or here as a parameter*/},
success: function(response) {
// do some things on success
},
failure: function() {/* do some things on failure*/}
});


For more details, check out the API Docs

masoud_tamizy
30 Jan 2012, 7:36 AM
you can use this code when you lose focus:


Ext.Ajax.request({
url: '__yourURL__&ID=' + ID, // you can append your parameter to the URL
params: { /* or here as a parameter*/},
success: function(response) {
// do some things on success
},
failure: function() {/* do some things on failure*/}
});


For more details, check out the API Docs
thanks and i need what code that diagnose blur event . . .




Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.panel.*',
'Ext.form.*',
'Ext.util.*',
'Ext.tip.*',
'Ext.Action',
'Ext.ux'
]);


Ext.onReady(function() {


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'national_code', type: 'string' },
{ name: 'user_id', type: 'int' },
{ name: 'first_name', type: 'string' },
{ name: 'last_name', type: 'string' },
{ name: 'father_name', type: 'string' },
{ name: 'sh_sh', type: 'string' },
{ name: 'sh_s_sh', type: 'string' },
{ name: 'gender', type: 'string' },
{ name: 'birth_date', type: 'date' },
{ name: 'birth_location', type: 'string' },
{ name: 'email', type: 'email' },
{ name: 'home_address', type: 'string' },
{ name: 'home_phone', type: 'string' },
{ name: 'postal_code', type: 'string' },
{ name: 'job_title', type: 'string' },
{ name: 'job_address', type: 'string' },
{ name: 'job_phone', type: 'string' },
{ name: 'mobile', type: 'string' },
{ name: 'fax', type: 'string' },
{ name: 'comment', type: 'string' }
],
idProperty:"user_id",
validations: [
{type: 'presence', field: 'national_code'},
{type: 'presence', field: 'first_name'},
{type: 'presence', field: 'last_name'},
{type: 'presence', field: 'father_name'},
{type: 'presence', field: 'gender'},
{type: 'presence', field: 'home_address'},
{type: 'presence', field: 'home_phone'},
{type: 'presence', field: 'postal_code'},
{type: 'inclusion', field: 'gender', list: ['????', '????']}
]
});
var sex = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"M", "name":"????"},
{"abbr":"F", "name":"????"}
]
});
var userstore = Ext.create('Ext.data.Store', {
id:'userstore',
model: 'User',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
noCache:true,
api:{
read: 'prepare.php',
create:'insert.php',
update: 'update.php',
destroy: 'delete.php'
},
reader : {type:'json',root:'users',successProperty: 'success',messageProperty: 'message'},
writer : {type:'json',root:'users',writeAllFields: true},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function(proxy, operation){
if (operation.action == 'destroy') {
//main.child('#form').setActiveRecord(null); // insert action to perform fired destroy
alert('destroy operation selected');
}
Ext.example.msg(operation.action, operation.resultSmessageet);
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
errorSummary:false
});
var grid = Ext.create('Ext.grid.Panel', {
listeners: {
////////////////////
},
store: userstore,
selType: 'rowmodel',
loadMask: true,
plugins: [rowEditing],
columns: [
{ dataIndex: 'national_code',
width: 75,
hideable: false,
header:'??????',
sortable:false,
align:'right',
editor: {id:'national',xtype:'numberfield',hideTrigger: true}
},{ dataIndex:'first_name',
text:'???',
width: 75,
align:'right',
field: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'last_name',
text:'?????',
width: 75,
align:'right',
field: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'father_name',
text:'??? ???',
width: 75,
align:'right',
field: {xtype:'textfield',allowBlank: false}
},{ dataIndex:'sh_sh',
text:'????? ????????',
width: 90,
align:'right',
sortable:false,
field: {xtype:'numberfield',hideTrigger: true,allowBlank: true}
},{ dataIndex:'sh_s_sh',
width: 125,
text:'????? ????? ????????',
sortable:false,
align:'right',
field: {xtype:'textfield',allowBlank: true,selectOnFocus:true}
},{ dataIndex:'gender',
text:'?????',
width: 50,
align:'right',
editor: {xtype:'combo',store: sex,editable:false,allowBlank: false}
},{ dataIndex:'birth_date',
text:'????? ????',
width: 75,
align:'right',
hidden:true,
renderer : Ext.util.Format.dateRenderer('d/m/Y'),
editor: {xtype:'datefield',allowBlank: true,selectOnFocus:true}
},{ dataIndex:'birth_location',
text:'??? ????',
width: 100,
hidden:true,
align:'right',
field: {type:'textfield',allowBlank: true,selectOnFocus:true}
},{ dataIndex:'email',
text:'??? ?????????',
width: 150,
hidden:true,
align:'left',
field: {type:'textfield',vtype:'email',allowBlank:true,selectOnFocus:true}
},{ dataIndex:'home_address',
text:'???? ????',
width: 175,
align:'right',
field: {type:'textfield',allowBlank: false,selectOnFocus:true}
},{ dataIndex:'home_phone',
text:'???? ????',
width: 80,
align:'right',
field: {xtype:'numberfield',hideTrigger: true,allowBlank: false}
},{ dataIndex:'postal_code',
text:'?? ????',
width: 75,
align:'right',
field: {xtype:'numberfield',hideTrigger: true,allowBlank: false}
},{ dataIndex:'job_title',
text:'???',
align:'right',
hidden:true,
field: {xtype:'textfield',allowBlank: true,selectOnFocus:true}
},{ dataIndex:'job_address',
text:'???? ??? ???',
align:'right',
hidden:true,
field: {type:'textfield',allowBlank: true,selectOnFocus:true,maxLengthText:"! ??? ???? ?????? ?? ????? 255 ????? ????",maxLength:255,enforceMaxLength:true}
},{ dataIndex:'job_phone',
text:'???? ??? ???',
align:'right',
width: 80,
hidden:true,
field: {xtype:'numberfield',hideTrigger: true,allowBlank: true}
},{ dataIndex:'mobile',
text:'???? ?????',
width: 80,
align:'right',
field: {xtype:'numberfield',hideTrigger: true,allowBlank: true},
hidden:true
},{ dataIndex:'fax',
text:'????',
width: 80,
align:'right',
hidden:true,
field: {xtype:'numberfield',hideTrigger: true,allowBlank: true}
},{ dataIndex:'comment',
text:'???????',
align:'right',
hidden:true
}],
title: '???? ???????',
tbar : [{
itemId : 'remove',
text : '????? ???',
iconCls: 'employee-remove',
handler : function() {
var select = grid.getSelectionModel();
rowEditing.cancelEdit();
userstore.remove(select.getSelection());
},
disabled : true
}, {
text : '????? ????',
iconCls: 'employee-add',
handler : function() {
var record = Ext.create('User',{
national_code: '1234567890',
first_name: '???',
last_name: '?????',
father_name: '??? ???',
gender: '????',
home_address:'???? ????',
home_phone:'1234567890',
postal_code:'1234567890'
});
rowEditing.cancelEdit();
userstore.insert(0, record);
rowEditing.startEdit(0, 0);
}
} ],
height:575,
width:1366,
listeners: {
select: function(rowModel, record) {
var code = record.get('national_code');
var id = record.get('user_id');
console.log('????? ????? ?????? ?? :',code);
console.log('????? ?????? :',id);
},
selectionchange: function(selModel, selected) {
var rec = grid.getSelectionModel().getSelection()[0];
if (rec) {
console.log("Sell " + rec.get('last_name'));
} else {
console.log('Please select a company from the grid');
}
}
},
renderTo: Ext.getBody(),
tools: [{ type: 'refresh' }]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#remove').setDisabled(selections.length === 0);
});
});


i need it for national_code grid cilumn .

Farish
30 Jan 2012, 8:15 AM
you can assign a listener for the blur event of the editor for that column:



{ dataIndex: 'national_code', width: 75, hideable: false, header:'??????', sortable:false, align:'right',
editor:
{
id:'national',
xtype:'numberfield',
hideTrigger: true,
listeners:
{
blur: function() {alert('blur');}
}
}
}