A checkcolumn in a grid needs to be validated before the user changes its state:
{
xtype: 'checkcolumn',
dataIndex: 'add',
width: 70,
text: 'Add',
listeners: {
beforecheckchange: 'onPermissionChangeCheckAllowed'
}
}
At the moment onPermissionChangeCheckAllowed validates using sync Ajax, like:
onPermissionChangeCheckAllowed: function (chk, rowIndex, checked, record, e, eOpts) {
var result = Ext.Ajax.request({
async: false,
url: '/checkUserPermission',
params: Ext.encode(record)
});
return result;
}
This works --but async: false freezes the browser (for a ms) and I would like to know: is there another option to make this validation? In fact the console shows the warning that this behaviour will be deprecated :-O
The grid is a pivot table (done with SQL, not with Ext Pivot), so it is necessary to send the exact checkbox co-ordinates since there is no valid id (i.e. submitting the record doesn't provide enough information about the column name and the id is an autogenerated Ext id).
It freezes because javascript is single threaded by nature. You should be either passing a permissions flag to the browser to create the logic to hide/disable the checkbox to the user AND validating on the server side.
If you really want to do an ajax call on each checkbox click (you absolutely shouldn't), you need to:
Block the change if it was clicked by the user
Send an ajax request
Set the checkbox pragmatically
Related
I have a grid with remote data (php/mysql/json) and use a form to insert records or to edit this data.
I use the api configuration of the proxy/store. I use MVC architecture.
So, all very simple (in pseudo code):
get selected model form grid or create model
frm.loadRecord()
frm.updateRecord()
frm.getRecord().save()
and all works fine, but I noticed in the browser console that after the POST (works fine, calls either the url configured with create or the url configured with update), the store calls (GET) the url configured with retrieve twice. These calls are identical.
So functionally all works fine and I could ignore it, but now I've noticed I want it fixed.
Can anyone help me where to look? Thanks in advance.
Details:
It's all really basic:
In the controller of the gridpanel:
updateRow: function (gridpanel) {
var sm = gridpanel.getSelectionModel();
var record = sm.getLastSelected();
this.showForm(record);
}
and
showForm: function (record) {
...
formpanel.show();
var frm = formpanel.getForm();
frm.loadRecord(record);
}
In the controller of the formpanel:
submit: function(frm) {
frm.updateRecord();
frm.getRecord().save();
}
When I remove the save action the GET requests aren't called, so this seems to trigger them.
In the store:
api: {
create: '../php/api/customers.php?request=create',
read: '../php/api/customers.php?request=retrieve&scope=summary',
update: '../php/api/customers.php?request=update',
destroy: '../php/api/customers.php?request=delete'
}
The screenshot:
In every sencha request there are an extra parameter _dc. Please have took at the following image.
I want to remove this parameter for every request. So, please help me to do that.
Thank You...
_dc - this is "disable cache". You can disable this noCache parameter in proxy in your store\model. Example:
Ext.define('your model name', {
extend: 'Ext.data.Model',
fields: [...],
proxy: {
url: 'getcandidateblock',
noCache: false
}
})
But it's bad idea for ALL get requests to server.
Use 'noCache' config in your store's proxy
To disable the '_dc' query param, set this to false.
From Sencha Doc,
noCache - Disable caching by adding a unique parameter name to the request. Set to false to allow caching. Defaults to true.
I need to display the server log file into the screen using ajax call. The panel need to render every 10 seconds to get updated log file. I tried with following code.
var LogPanel = Ext.extend(Ext.Panel, {
title : 'API LOG',
width : '100%',
height:265,
autoScroll: true,
listeners: {
'render': function()
{
Ext.Ajax.request({
url: 'logs/mylog.log',
success: function(response){
Ext.getCmp('logPanelId').update( response.responseText );
}
});
}
}
});
Ext.reg('logPanel', LogPanel);
I cannot get properly aligned log data in the panel as available in the log file
My log contains xml codes. but xml codes not displayed in the panel.
one of my xml tag name is "input". but In the panel Html textfield was
created.
guide me to solve these issues.
Try this:
var s = Ext.util.Format.htmlEncode(s);
Ext.getCmp('logPanelId').update('<pre>' + s + '</pre>');
Couple of things :
1) read response as responseXML. Something like Ext.getCmp('logPanelId').update( response.responseXML );
2) This enables a formatted xml . If your log file is bound a xml schema (which normally it is) , you should take a look at XmlReader. This will help you avoid the encoding and decoding overhead at the client side.
I have a combobox (extjs4.1.2) with the following configs:
xtype:'combo',
store: 'MyItems',
queryParam:'itemNumber',
displayField:'itemNumber',
hideTrigger:true,
typeAhead:true,
minChars:7,
lastQuery: '',
queryDelay:500
Everything works as expected and store fires a remote query on the 7th char. However if user keeps typing 8th character then another query is fired. The second query returns faster than the first, then first query returns and messes up the pull down. Is there a way to cancel the first query when a subsequent query is run ?
Thanks.
You can use Ext.Ajax.abort() or Ext.Ajax.abortAll() (ExtJS 4).
See the API Documentation: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Ajax
You can use it by intercepting the onTypeAhead function of the combo box:
comboObj.onTypeAhead = Ext.Function.createInterceptor(comboObj.onTypeAhead, function() {
Ext.Ajax.abort(); //aborts the last Ajax request
return true; //runs the onTypeAhead function
});
Or you could use the autoAbort property in Ext.data.Connection but there isn't much documentation on this. I'll try to get a working example for you on this.
Here is what I ended doing:
listeners:{
beforequery:function(queryEvent){
Ext.Ajax.abortAll(); //cancel any previous requests
return true;
}
}
I have a grid what update my database (via PHP) with JSON record.
I want to know, how the data writed - record or not. I have an answer from PHP (true or false) to the grid, but dont know how to use it. How my grid can use this answer? (success event?)
Now, for example, User added new record without id at database (and i need this id for the future update), php answer what record saved(true) and told me id of new record. How I should work with it?
And I saw somehere some beauty flowing from the top of screen windows - how do the called?
Sorry for typically questions, but I cant find answer for it.
Thanks.
If you are using Ext.Ajax.request to make the connection this is how you do it.
Ext.Ajax.request({
url: 'ajax_demo/sample.json',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
console.dir(obj);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
There is a success callback function you specify which gets the response from the server which is a JSON object. This is where you can send things back and then manipulate your roweditor grid however you like.
Success also doesn't mean that everything went ok, it just means the request did not produce an html error code 4xx or 5xx.
The failure callback function is what to do if the server returns an error code for the AJAX request.