I have a grid which uses a remote store and remote pagination because I have too many records.The store for the main grid is:
Ext.define('ArD.store.RecordsListStore', {
extend: 'Ext.data.Store',
model: 'ArD.model.RecordsListModel',
autoLoad: true,
autoSync: true,
remoteSort: true,
remoteFilter: true,
pageSize: 15,
proxy: {
type: 'ajax',
actionMethods: 'POST',
api: {
read: g_settings.baseUrl + 'index.php/recordslist/getAll',
destroy: g_settings.baseUrl + 'index.php/recordslist/deleteRecord'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
successProperty: 'success'
},
writer: {
root: 'data',
writeAllFields: true,
encode: true
}
}
});
then I populate my grid and and it's all fine. But the problem is that I have a combobox which looks like this:
{
xtype: 'combo',
id: 'records_list_form_id',
emptyText: 'Choose Form',
editable: false,
store: 'FilterRecordsByForm',
displayField: 'title',
valueField: 'id',
lastQuery: '',
triggerAction: 'all',
queryMode: 'remote',
typeAhead: false,
width: 200,
listeners: {
select: this._filterRecords
}
}
And when I select something from the combobox there's the function :
_filterRecords: function()
{
var recStore = Ext.getStore('RecordsListStore');
var a = Ext.getCmp('records_list_form_id').getValue( );
var rec = Ext.getStore('FilterRecordsByForm').getAt(a);
console.log(recStore);
},
mostly just trying some things but I can get the ID of the selected element from the combobox and that is where I am.
What I need is having the id to make a new query usign my AJAX api (PHP/SQL backend) and populate the grid with the info related with this id. In my case I have 1:M relations so when I pass the Id i expect M records which I want to render on the place of the old grid.
Thanks
Leron
Use filter() method. Provide information that you need to filter by and store object will automatically request updated info from the server (you already have remoteFilter configured).
Look at Ext.Ajax() to make an on-demand ajax call to the server-side to load up your data and then use Store.loadData() or something like that to re-populate the Grid.
Related
I have a grid in ExtJs 4.2. I need to apply remote sorting, remort filtering and pagination. So my store look like this:
storeId: 'mainStore',
pageSize: 10,
autoLoad: {
start: 0,
limit: 10
},
autoSync: true,
remoteSort: 'true', //For Remote Sorting
sorters: [{
property: 'COM_KOP_Vertriebsprojektnummer'
direction: 'ASC'
}],
remoteFilter: true, //For Remote Filtering
proxy: {
type: 'rest',
filterParam: 'filter',
url: PfalzkomApp.Utilities.urlGetData(),
headers: {
'Content-Type': "application/xml"
},
reader: {
type: 'xml',
record: 'record',
rootProperty: 'xmlData'
}
}
I do not want to set buffered = true case that will load my pages in advance and I have 1000 pages and I don't want to do that.
Remote filtering, Pagination, sorting is working fine But when I try to filter some thing, a seprate request for sorting is going as well. How can I stop it?
two requests when I try to filter some thing:
http://127.0.0.1/projektierungen/?_dc=1437058620730&page=1&start=0&limit=10&sort=[{"property":"COM_KOP_Vertriebsprojektnummer","direction":"DESC"}]
http://127.0.0.1/projektierungen/?_dc=1437058620734&page=1&start=0&limit=10&sort=[{"property":"COM_KOP_Vertriebsprojektnummer","direction":"DESC"}]&filter=[{"property":"COM_KOP_Vertriebsprojektnummer","value":"2882"}]
How can I stop the first request?
My code for filtering column is this:
{
text: 'Vertriebsprojektnr',
dataIndex: 'COM_KOP_Vertriebsprojektnummer',
flex: 1,
items : {
xtype:'textfield',
flex : 1,
margin: 2,
enableKeyEvents: true,
listeners: {
keyup: function() {
var store = Ext.getStore('mainStore');
store.clearFilter();
if (this.value) {
//debugger;
//debugger;
store.filter({
property : 'COM_KOP_Vertriebsprojektnummer',
value : this.value,
anyMatch : true,
caseSensitive : false
});
}
},
buffer: 1000,
}
}
}
Due to this auto genrated request, my view is not working fine. As the result after filtering are replaced by this sorting request.
Kindly help.
The extra request is not there because of sorting but because of the call to store.clearFilter(). Try to call store.clearFilter(true) that suppresses the event what could prevent that extra request.
Why are you clearing you filters when the value is empty? Why not filter on an empty value? I almost got the same situation, but I think my solution works well without clearing anything. Besides that I don't want to know which store to filter or have the property name hardcoded. Here is my filterfield:
Ext.define('Fiddle.form.TextField', {
extend: 'Ext.form.field.Text',
alias: 'widget.filterfield',
emptyText: 'Filter',
width: '100%',
cls: 'filter',
enableKeyEvents: true,
listeners: {
keyup: {
fn: function(field, event, eOpts) {
this.up('grid').getStore().filter(new Ext.util.Filter({
anyMatch: true,
disableOnEmpty: true,
property: field.up('gridcolumn').dataIndex,
value : field.getValue()
}));
},
buffer: 250
}
}
});
And here is the view declaration:
dataIndex: 'company',
text: 'Company',
flex: 1,
items: [{
xtype: 'filterfield'
}]
I've setup a basic Kendo Grid and I'm using the DataSourceResult class from the PHP Wrapper library on the sever side.
I've come across a strange issue... if I create a new record and then edit it (without refreshing the page), the create operation is called again, rather than the update operation.
If the page is refreshed after adding the new record, the update operation is called correctly after making changes to the record.
I can confirm that the DataSourceResult class is returning the correct data after the create operation, including the id of the new record.
Any ideas why this is happening (and how to stop it)?
Thanks
Update: Here's the datasource code. The query string in the url is just to easily distinguish the requests in Chrome's console. The additional data passed with each request is used by ajax.php to distinguish the different actions requested.
data = new kendo.data.DataSource({
transport: {
create: {
url: '/ajax.php?r=gridCreate',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'create' }
},
read: {
url: '/ajax.php?request=gridRead',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'read' }
},
update: {
url: '/ajax.php?r=gridUpdate',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'update' }
},
destroy: {
url: '/ajax.php?r=gridDestroy',
dataType: 'json',
type: 'post',
data: { request: 'grid', type: 'destroy' }
},
parameterMap: function(data, operation) {
if (operation != "read"){
data.expires = moment(data.expires).format('YYYY-MM-DD HH:mm');
}
return data;
}
},
schema: {
data: 'data',
total: 'total',
model: {
id: 'id',
fields: {
id: { editable: false, nullable: true },
code: { type: 'string' },
expires: { type: 'date' },
enabled: { type: 'boolean', defaultValue: true }
}
}
},
pageSize: 30,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
Best solution
Set to update, create or delete different Call Action
From Telerik Support :
I already replied to your question in the support thread that you
submitted on the same subject. For convenience I will paste my reply
on the forum as well.
This problem occurs because your model does not have an ID. The model
ID is essential for editing functionality and should not be ommited -
each dataSource records should have unique ID, records with empty ID
field are considered as new and are submitted through the "create"
transport.
schema: {
model: {
//id? model must have an unique ID field
fields: {
FirstName: { editable: false},
DOB: { type: "date"},
Created: {type: "date" },
Updated: {type: "date" },
}
} },
For more information on the subject, please check the following
resources:
http://docs.kendoui.com/api/framework/model#methods-Model.define
http://www.kendoui.com/forums/ui/grid/request-for-support-on-editable-grid.aspx#228oGIheFkGD4v0SkV8Fzw
MasterLink
I hope this information will help
I have also the same problem & I have tried this & it will work.
.Events(events => events.RequestEnd("onRequestEnd"))
And in this function use belowe:
function onRequestEnd(e) {
var tmp = e.type;
if (tmp == "create") {
//RequestEnd event handler code
alert("Created succesully");
var dataSource = this;
dataSource.read();
}
else if (tmp == "update") {
alert("Updated succesully");
}
}
Try to Use this code in onRequestEnd event of grid
var dataSource = this;
dataSource.read();
Hope that it will help you.
Pass the auto-incremented id of the table when you call the get_data() method to display data into kendo grid, so that when you click on the delete button then Deledata() will call definitely.
Another variation, in my case, I had specified a defaultValue on my key field:
schema: $.extend(true, {}, kendo.data.transports["aspnetmvc-ajax"], {
data: "Data",
total: "Total",
errors: "Errors",
model: kendo.data.Model.define({
id: "AchScheduleID",
fields: {
AchScheduleID: { type: "number", editable: true, defaultValue: 2 },
LineOfBusinessID: { type: "number", editable: true },
Not sure what I was thinking but it caused the same symptom.
I am trying to create two combo boxes, one enabling users to select a state and the other a local government area (LGA), and have it so the LGAs are filtered on the basis of the state selected. I'm using Ext 3.4 and populating data stores using an AJAX request. The filtering is being done with a REST query to Django.
I believe the issue I'm having is coming down to variable scope, as the first combo box works fine but once I select a state I get an error stating "Uncaught TypeError: Cannot call method 'request' of undefined" when I'm trying to load the URL for the LGA combo box's data store. I've indicated where this is happening with a comment in the code (see below). I'm struggling to understand how I need to rejig the code to make things work. I'm a bit of a newbie to programming so apologies if the solution is a simple one. My code is below.
Thanks in advance for any help.
Ext.onReady(function() {
var stateStore = new Ext.data.JsonStore({
autoDestroy: true,
url: 'states.json',
storeId: 'ste-store',
root: 'records',
id: 'ste-store',
fields: ['state']
});
var lgaStore = new Ext.data.JsonStore({
autoDestroy: true,
url: '',
storeId: 'lga-store',
root: 'records',
id: 'lga-store',
fields: ['lga']
});
var stateCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'ste-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: stateStore,
displayField: 'state',
valueField: 'state',
listeners: {
render: function(e) {this.getStore().load()},
select: function(combo, record, index) {
var selectedState = record.get('state');
var lgaUrl = 'lgas.json?state=' + selectedState;
lgaStore.url = lgaUrl; //Error is traced back to here
lgaCombo.getStore().load();
}
}
});
var lgaCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'lga-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: lgaStore,
displayField: 'lga',
valueField: 'lga',
});
});
first mistake of your code in mode. If you fetching data from back-end mode should be remote.
Another i advice your use select event of first combo box to get the data from server .
here is my two combo box which fetch the data remotely
new Ext.form.ComboBox({
id:"myB",
hiddenName:'myserId',
store: myStore(),
emptyText:'Select App ...',
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
listWidth : 345,
anchor : '90%',
selectOnFocus:true,
listeners: {
// 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
select: function(combo, record, index){
var geoStorageCB = Ext.getCmp('geoCB');
geoStorageCB.getStore().proxy.setUrl('../test', true);
geoStorageCB.getStore().load({
params:{
id:combo.getValue()
}
});
}
}
}),new Ext.form.ComboBox({
id:"geoCB",
hiddenName:'geoId',
hidden : true,
store:myGeoStorage(),
emptyText:'Select GeoStorage ...',
displayField: 'storageName',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'local',
listWidth : 345,
editable: false,
maxLength: 50,
anchor : '90%',
selectOnFocus:true
})
This Example from sencha forum can give you an idea how cascading combo works. I think the main problem of your code is your lgaStore loading method (inside stateCombo listener) doesn't use correct way to pass parameters to Django for the query. As naresh mentioned, you'd better use "lgaCombo.getStore().load({params:{...}});"
I want to add a combobox in my app with a remote store. I have a store that call a php script that returns data in json format and I linked it with my combobox.
The store is autoLoaded but my combobox is still empty.
Here's my store
// Define autocomplete model
Ext.define('modelloAC', {
extend: 'Ext.data.Model',
fields: [
{ name: 'telaio' }
]
});
// store auto complete
var autoCompleteStore = Ext.create('Ext.data.Store', {
model: modelloAC,
autoLoad: true,
proxy: {
type: 'ajax',
url: 'script/request.php?operazione=gettelai',
reader: {
type: 'json',
root: 'telai',
totalProperty: 'results'
}
}
});
My PHP return a JSON array:
{"results":207,"telai":[{"telaio":"ZAR93200001271042"},{"telaio":"ZLA84000001738127"},{"telaio":"VF3WC9HXC33751301"},{"telaio":"W0L0AHL3555247737"}]}
My combobox:
xtype: 'combo',
name: 'telaio',
//hideTrigger: true,
store: autoCompleteStore,
typeAhead: true,
queryMode: 'remote',
fieldLabel: 'Telaio'
My store loads perfectly but my combobox is empty, where's the problem?
Need to add displayField and valueField in combo config:
...
displayField: 'telaio',
valueField: 'telaio',
...
Also model in your store is undefined now. Write it as a string:
...
model: 'modelloAC',
...
Here is my code
I want to load some data by Jsonp and display as list items.
Ext.setup({
onReady: function(){
Ext.regModel('Provinces', {
fields: [{
name: 'ProvinceID',
type: 'int'
}, {
name: 'ProvinceName',
type: 'string'
}]
});
var store = new Ext.data.Store({
autoLoad: true,
model: 'Provinces',
fields:['ProvinceName', 'ProvinceID'],
proxy: {
url: 'http://172.19.44.122/BC/Home/GetProvices',
type: 'jsonp'
},
autoLoad:true
});
new Ext.List({
fullscreen: true,
itemSelector: '.province',
tpl: '<tpl for="."><div class="province">{ProvinceName} - {ProvinceID}</div></tpl>',
store: store
});
}
});
The JSONP data looks like this:
Ext.data.JsonP.callback1([{"ProvinceID":1,"ProvinceName":"shanghai"},"ProvinceID":2,"ProvinceName":"zhejiang"}]);
but the reslut is the page only display two empty lines .
You should use the itemTpl property on the list, instead of tpl, like this:
new Ext.List({
fullscreen: true,
itemTpl: '{ProvinceName} - {ProvinceID}',
store: store
});