I want to reload my grid on checking of different radio buttons,but with the new urls which i want to provide to grid to give different different columns inside grid..
this is my radio button where i want to give different url to my grid.
{
boxLabel: ' 1', name: 'rb-horiz-3', inputValue: 1,
listeners: {
check: function(){
//what i write here to
// reload grid with different url ....
}}
}
this is my grid..
{
xtype:'grid',
store:new Ext.data.JsonStore({
id:'store_id',
root:'result',
totalProperty:'total',
fields:[
{name:'rank'},
{name:'pg'},
],
baseParams:{start:0,limit:20},
url:'pgrouting!getGridData.action',//this i want to change on checking of radio button...
autoLoad:true,
method:'POST'}
As #MMT said in the comment, set the url of the bound proxy to an new url and then perform a load of the store.
check: function(){
var url = http://example.com/data; // set the specific url
// what you need here is a reference to your grid or store
var store = grid.getStore(); // get the store from the grid
var proxy = store.getProxy(); // get the proxy from the store
proxy.setUrl(url); // change the url of the proxy
store.load(); // load the new data
}}
What you need in the check listener is a reference to either the grid or the store of the grid.
Related
I'm using ExtJS 6.2. I have a xtype: 'treepanel' that allows an admin user type to check several companies. If user_type = company, then the treepanel is preloaded with that company's node checked value as true, and also I set 'beforecheckchange' listener to return false, so that user cannot select any other company.
What I would like to achieve now is to focus the store on to that preloaded value. In other words, I don't want the user to scroll to find its company's node checked, I would like to preset that position to show the checked node right away.
Any orientation on how to achieve this would be appretiated.
Achieved using treepanel's selectPath method, in afterlayout event:
afterlayout: function(me){
var type = localStorage.getItem("Usertype");
var id = localStorage.getItem("Id");
var tree = Ext.getCmp('your_treepanel_id')
if(type==desiredUserFilter) {
var child = me.getRootNode().findChild('id',id,true)
tree.selectPath(child)
}
},
I have treePanel with widgetColumn which includes combobox widget in it wuth default text. My requirement is when i select the defalt text, one new record should get inserted in store & also get saved in database.
{
text: 'TC',
dataIndex: 'scrTC',
xtype: 'widgetcolumn',
widget: {
xtype: 'combo',
store: 'TCStore',
valueField: 'id',
displayField: 'name',
matchFieldWidth: false,
listeners: {
select: 'selectDefault'
}
}
}
Controller Method:
selectDefault: function(combo){
loadData(combo, id, name); //there is a logic to get id & name, then pass it to loadData method
}
loadData: function(combo, id, name){
var store = combo.getStore();
store.insert(0,{id: id, name: name});
store.sync();
combo.setValue(id);
}
Issue is when i first time select default text, store sync method is not inserting the data in database but the combo show the new value & store also the new value(seen using debugger).
When i select again then the data is inserted into database.
I Debugged code, the execution flow is correct, only thing is sync is not calling backend to insert data at first instance, but works for second time.
Can someone help.
If you assign id to the inserted record, sync thinks, that it already exists in the DB and won’t fire add event (inserted record won't get phantom property). Either rename id field or set idProperty for the model to something else.
The store will use it's proxy to sync the data with your backend, so ensure that it is configured to the type of backend that you are using. The store itself may be configured with a proxy, or it may be defaulting to the proxy on it's model. Without seeing the store configuration, I can't say for sure.
For example, if you are using a REST backend, then use a REST proxy on the model that the store is configured with: https://docs.sencha.com/extjs/6.6.0/modern/Ext.data.proxy.Rest.html
We are using EXT-JS 3.x. To select records from pages, used the method selectRecords(). Now, I can select records when I navigate the pages. But the problem is, on clicking the submit button all the selected records across pages should be visible. But below line of code grid.getSelectionModel().getSelections()
returns the selected records in the current page.
Whether there are any options available to get all the selected records?
Don't know if It can be great for you, but I can suggest you to use a new column in the store to indicate if the row is selected or not. This column will be a boolean. You can set it value with listeners rowselect and rowdeselect.
On submit you will be able to query the store to get only the records with the correct indicator value.
For example:
var myStore = new Ext.data.JsonStore({
fields: [{name:"col1", type:"string"}, {name:"INDICATOR", type:"'boolean'"}]
});
var myGrid = new Ext.grid.GridPanel({
store: store,
columns: [...//Don't put the INDICATOR here
sm: new Ext.grid.RowSelectionModel({singleSelect: false}),
....
listeners: {
rowselect: (e,index, record){
record.data["INDICATOR"] = true;
},
rowdeselect: (e,index, record){
record.data["INDICATOR"] = false;
},
....
}
});
On submit
var mySelection = myStore.query("INDICATOR", true);
I hope I give you a great example and it's not to complicated.
I haven't test my code so maybe you will have to correct it a little bit.
Good luck!
Problem:
I am loading the ng-grid with data from a server.
I am changing the order and the visible columns in ng-grid (using the mouse, not programmaticaly), but the columnDefs is not updated.
I want to store information about the new order / visibility on another server but I don't know how to access it if columnDefs was not changed.
How can I access programmatically the new order / visibility ?
I tried:
$scope.gridOptions = {
data: 'someData'
columnDefs : 'columnDefs',
enableColumnReordering : true, // this is how I achieve reordering
showColumnMenu : true, // this is how I can specify the visible columns
...
};
...
$scope.columnDefs = [{
...
}];
$scope.$watch('columnDefs', function() {
console.log('columnDefs was modified !');
}, true);
The "columnDefs was modified !" message is:
printed to the console 2 times (1 time before the populating of ng-grid, 1 time after the populating of ng-grid)
not printed after I manually reorder the columns / change visibility for some columns
try gridOptions.$gridScope.columns, under the hood, ng-grid updates this array for sorting, freeze, show/hide etc.
If you want to know when a user has reordered a column you can listen to ngGridEventSorted
$scope.$on ('ngGridEventSorted', function(event, data){
alert('reordered');
});
So I have a date picker and a select-list. Then a jqgrid, working fine, filtering and all. This is what I am doing.
$("#sessSearch").unbind('click').on('click', function(){
var mydate = $("#sessSelector").val();
var mytype = $("#sess_type :selected").val();
if(mydate && mytype){
$("#listSESS").jqGrid('setGridParam',{postData:{sess_date:mydate, sess_type:mytype}}).trigger("reloadGrid");
}else{
alert("The search form is incomplete");
}
$("#sessSelector").val('');
$("#sess_type").val('');
});
What is happening there is I am sending along the values of my selectlist and datepicker along in the postData for the jqgrid. Only when the search button is clicked. So far so good. I can get the values on the serverside. The problem is when I click the refresh button on the grid pager, the previously sent paramiters remain in the postData. See below, firebug showing all post parameters.
The first is a normal default load, works fine.
The second happens after using my search form and adding to the postData and then I clicked on the refresh button the grid pager.
How do I reset the postData for the grid native reload mechanism to exclude my custom parameters?
My custom paramiters must only go in when I tell it to go in.
Please advise.
You can use getGridParam to get reference on internal object postData. The object have properties sess_date and sess_type with the values from the last setGridParam call. One can use delete to remove property from an object. So the following code should work
var postData = $("#listSESS").jqGrid("getGridParam", "postData");
delete postData.sess_date;
delete postData.sess_type;
Thank you so much Oleg, I basically disabled the default refresh action and did this with the pager. So my custom search sends the parameters only when my search mutton is clicked.
jQuery("#listSESS").jqGrid('navGrid','#pagerSESS',{edit:false,add:false,del:false,search:false, refresh:false},
{}, // edit options
{}, // add options
{}, // del options
{} // search options
);
$("#listSESS").jqGrid('navButtonAdd', "#pagerSESS", {
caption: "", title: "Reload Grid", buttonicon: "ui-icon-refresh",
onClickButton: function () {
var mypostData = $("#listSESS").jqGrid("getGridParam", "postData");
delete mypostData.sess_date;
delete mypostData.sess_type;
$("#listSESS").jqGrid('setGridParam',{postData:mypostData}).trigger("reloadGrid");
}
});
works like a charm.