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
});
Related
I have an issue with ajax calling. It works correct except one thing, when I try to get data with the same option more than one times returns the new response but also still return the data of the previous response.
I think that there is something that I've missed.
ajax script
$('#search').on('click', function () {
var date = $("#date").val();
$.ajax({
type: 'GET',
url: '{{Route("dashboard.status")}}',
data: {
date: date
},
dataType: "JSon",
success: function(response){
console.log(response.manager_hourlog);
// Employee report script
var colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"];
#if ($auth->user_type != 1)
// manager report script
var managerchartbar = {
labels: response.manager_projects,
datasets:
[{
label: response.users,
backgroundColor: colors[Math.floor(Math.random() * colors.length)],
data: response.totals
},]
};
var ctx = document.getElementById('manager').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: managerchartbar,
options: {
title: {
display: true,
text: 'Project Report chart'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
#endif
},
error: function(xhr){
console.log(xhr.responseText);
}});
});
});
</script>
You should change your method to POST for json request/response API, will be more secure and avoid laravel cache view it.
type: 'POST',
Try to change method to POST (do same for your api server and route).
If not work, please show your laravel API code.
you should set cache property to false or append "_={timestamp}" to the GET parameter
so add cache to your request:
cache:false
or append timestamp to your url:
url: '{{Route("dashboard.status")}}'+'_='+ + new Date().getTime(),
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',
...
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.
I'm having trouble passing parameters into the GetAll method of my controller. I tried Filter as below but no luck. any suggestions?
Ext.define('AM.store.Sessions', {
extend: 'Ext.data.Store',
model: 'AM.model.Session',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'Session/GetAll',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'Data',
successProperty: 'success'
},
filters: [
new Ext.util.Filter({
property: 'eyeColor',
value: 'brown'
})
]
}
});
Im not sure what you are after. But stating extraParams in you proxy will put that parameter on every load() on your store. Like this.
Ext.define('AM.store.Sessions', {
extend: 'Ext.data.Store',
model: 'AM.model.Session',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read: 'Session/GetAll',
update: 'data/updateUsers.json'
},
extraParams:{
eyeColor:'brown'
}
reader: {
type: 'json',
root: 'Data',
successProperty: 'success'
}
}
});
You could also listen on the "beforeLoad" event on the store and modifu parameters there.
OR.. you could just pass parameters to the load() function as this
var myStore = Ext.create('AM.store.Session');
myStore.load({
params:{
eyeColor:'brown'
}
})