In my extjs project when I have this store loaded... which populates a combobox, the combobox is not displaying the results in sort order. Can someone see what I am doing wrong?
Ext.define('ExtApplication4.model.ClientListModel', {
extend: 'ExtApplication4.model.Base',
requires: ['ExtApplication4.model.Base'],
fields: [
{ name: 'clientName' },
{ name: 'ClientShortCode' }
],
sorters: [
{
property: 'clientName',
direction: 'ASC'
}
],
sortRoot: 'clientName',
sortOnLoad: true,
proxy: {
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'data'
}
You are defining sorters on your model. You should define sorters on your store.
Be careful of the remoteSort property. It defines if the store is sorted locally (on client) or remotely (on server).
Also, you shouldn't need to require extended classes.
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 am trying to get a grid filled with the json response I would receive when making a httpwebrequest call to a url endpoint which requires authentication. The data will be in json form:
{
"data": [
{
"value": "(\"Samsung Health\")",
"tag": "ME"
},
{
"value": "(\"Samsung Galaxy Tab\")",
"tag": "HIM"
},
{
"value": "(\"Amazon fire\")",
"tag": "ME"
}
]
}
I am not sure how to even start and whether to use Ext.Ajax.Request or some type of call from code behind. I am using vb.net in code behind. Any suggestions appreciated. Sample code for ajax call;
function getMembers() {
var parameters = {
node: dynamicNodeId
}
Ext.Ajax.Request({
url: 'https://data.json',
method: 'GET',
jsonData: Ext.encode(parameters),
success: function (response, opts) {
alert('I WORKED!');
//decode json string
var responseData = Ext.decode(response.responseText);
//Load store from here
memberStore.loadData(responseData);
},
failure: function (response, opts) {
alert('I DID NOT WORK!');
}
});
}
The grid formation:
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text: 'Query',
flex: 1,
sortable: false,
dataIndex: 'query'
},
{
text: 'Last Updated',
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
},
Here query would be the value from the json response and lastChange the current datetime. I tried the proxy request call and realized that since I am calling an endpoint on a different domain I needed to use jsonp.
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'jsonp',
extraParams: {
login: 'username',
password: 'password'
},
url: 'https://api.data/rules.json',
reader: {
type: 'json',
root: 'rules'
},
callbackParam: 'callback'
},
autoLoad: true
});
I might have to just figure out some other way to do by making sure all the data I needed is called to a database by some other function.
The best approach for your situation would be to create store that is configured with a remote proxy. See the example at the top of this documentation page: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store
The remote proxy will take care of the AJAX request to retrieve the data, and the store will automatically manage casting the data results to Ext.data.Model instances. Once the store is loaded with data, the grid to which the store is bound will also automatically handle rendering the data that has been populated into the store.
Using Kendo.web.js versions 2013.2.716 and 2012.3.1315, I am trying to use a function in my transport.create rather than calling a URL. What I find is that the function does not get called. Instead a default URL is called and the resulting HTML appears to cause an error in the bowels of kendo because it is expected to be JSON instead.
I assume that this is some type of configuration error, but I can't figure out where the problem is.
Here is a snippet of the code:
var clientListDS = new kendo.data.DataSource({
transport: {
read: {
url: window.baseUrl + 'HealthCheck/ClientSummary',
dataType: 'json',
type: 'POST'
},
create: function(a,b,c) { alert('Create'); },
createY: window.baseUrl + 'HealthCheck/DontCallMe',
createX: {
url: window.baseUrl + 'HealthCheck/DontCallMe',
dataType: 'json',
type: 'POST'
},
whatWeWantCreateToDo: function () {
showChooseDialog('Some Random String', 'Select Client', OnRefreshInactiveClientList);
},
destroy: function () {
alert('destroy');
},
update: function () {
alert('update');
}
},
autoSync: true,
schema: {
model: {
id: 'ID',
fields: {
ID: { required: false, type: 'number', nullable: true },
ClientName: { type: 'string' },
ClientTag: { type: 'string' },
Status: { type: 'string' }
}
}
}
});
Then I use the resulting data source to build a grid like this:
$('#cClientGrid').kendoGrid({
dataSource: clientListDS,
columns: [
{ field: 'ClientTag', title: 'Tag'},
{ field: 'ClientName', title: 'Name' },
{ field: 'Status' }
],
editable: {
mode: 'incell',
createAt: 'bottom'
},
edit: function (pEvent) {
if (pEvent.model.isNew())
alert('create');
else
alert('Edit');
},
toolbar: ['create']
});
Some behavior that is worthy of note:
You see several attempts at the create configuration. If I use CreateY or CreateX, it will call the resulting URL. If I use Create or WhatWeWantCreateToDo, I end up downloading the containing page with each element of my schema as get string items (I assume this is some type of default behavior as I can't find a reference to the URL which is downloaded).
When I turn off autoSync, the grid will call its edit function when I use the toolbar to create a new item. When I turn on autoSync, the edit function does not get called. Instead the data source create functionality runs.
Any thoughts or insight on how I might be able to call a function instead of a URL will be appreciated.
First make in transport everything being an URL or a function, do not mix them up.
If you need to implement read as a function, you simply do:
transport: {
read : function (options) {
$.ajax({
url: window.baseUrl + 'HealthCheck/ClientSummary',
dataType: 'json',
type: 'POST',
success : function (result) {
options.success(result);
}
});
},
I'm using Sencha 2.2.0 and i`m trying to populate a list component from a XML which came from a RSS url.
Example: http://www.bmfbovespa.com.br/NoticiasHome/rss.aspx?idioma=pt-br&ano=2012
So, i created the view News.js:
Ext.define('Investidor.view.News', {
extend: 'Ext.navigation.View',
xtype: 'news',
requires: [
'Ext.data.reader.Xml',
'Ext.dataview.List'
],
config: {
title: 'NotÃcias',
iconCls: 'star',
items: {
xtype: 'list',
itemTpl: '{title}',
store: 'News'
}
}
});
Which uses the store News.js:
Ext.define('Investidor.store.News', {
extend: 'Ext.data.Store',
config: {
model: 'Investidor.model.NewsItem',
proxy: {
type: 'ajax',
url: 'http://www.bmfbovespa.com.br/NoticiasHome/rss.aspx?idioma=pt-br&ano=2012',
reader: {
type: 'xml',
record: 'item',
rootProperty: 'channel'
...
Which uses the model NewsItem.js:
Ext.define('Investidor.model.NewsItem', {
extend: 'Ext.data.Model',
config: {
fields: ['title', 'description', 'link', 'pubDate']
}
});
The thing is: The page come in blank, and i don't see the browser trying to do an GET request (i'm seeing on chrome develop tool). So i think that the sencha touch isn`t consuming the URL. What am i doing wrong here?
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',
...