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',
...
Related
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.
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 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.
I would like an example of this. Please give me a detailed example.
If you want to store the results in a Store, first create your model like this:
Ext.define('app.model.Example', {
extend: 'Ext.data.Model',
config: {
fields: ['data'],
}
});
Next, create your Store:
Ext.define('app.store.Examples', {
extend: 'Ext.data.Store',
config: {
model: 'app.model.Example',
autoLoad: true,
autoSync: true,
},
});
An example of JSONP request is easy to find in Sencha Touch 2 Kitchensink Demo. Here I added some code to add the results to your store:
Ext.data.JsonP.request({
url: 'http://free.worldweatheronline.com/feed/weather.ashx',
callbackKey: 'callback',
params: {
key: '23f6a0ab24185952101705',
q: '94301', // Palo Alto
format: 'json',
num_of_days: 5
},
callback: function(success, result) {
var store = Ext.getStore('Examples');
var weather = result.data.weather;
if (weather) {
store.add({data: weather});
}
else {
alert('There was an error retrieving the weather.');
}
panel.getParent().unmask();
}
});
Hope it helps ... Let me know if there are any errors.
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
});