I'm having strange problem with my store inside ExtJS. My ASP.NET MVC3 controller returns JSON:
My store:
Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',
config: {
// I know the model works
model: 'MyApp.model.User',
storeId: 'Users',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'users/read',
reader: {
type: 'json',
root: 'users'
// also tried this
rootProperty: 'users'
}
}
}
});
Now, when I connect this store to the grid inside ExtJS 4.2.1, the grid shows TWO rows but without data. When I console.log(store) I see the data only inside raw property, not inside data property.
Does anyone know what's the problem? Why isn't there any mapping? The grid's dataIndex is also the same as Models fields (I've done this a thousand times with PHP, I don't know where is the problem here.)
One more thing I've tried. I've tried renderer: function(value) { console.log(value); } inside grid's columns and I was just getting undefined.
Edit: this is how the JSON actually looks like:
Try using root: 'users' not rootProperty. If not specified root defaults to ''.
Sencha Docs
SENCHA what the hell?! Sencha Touch 2 always says put everything in config?
Now when I do that in ExtJS, everything breaks?
I removed everything from config: {} and now it works great.
Related
I have to make a live search , and after hours spent on google I decided to ask here if anyone have an ideea how can I make an live search( using or not combobox) in Ext JS but (the triky part). I have 2 data sets . One data set from one URL and and second from another URL.
I dont know how to start or how can I make the request when I type something in my search box to return small data set first and when is completly loaded second data set ( is much bigger).
Something like when I type "computer" in search field in first block to show me some things related to computers (first request that have few data) after that in second block to show me more thing related to computer when request is over( second request lot of data).
I need this thing because in one of my request i have over 10 k product and i dont want to let user w8 until the request is done, and to show the other request that have fewer data. until the first is done.
I forgot to mention that i want to make both request in the same time and asynchronous.
My solution for exactly this kind of problem was:
Creating a store dedicated only for the combobox content.
When one of the two "source" stores loads data, they push the records into the combo-store.
You also have the reference between the records automatically, so if a record in source-store 1 or 2 is removed, it also disappears in your combostore- and so in your combobox, like magic! Here is the key, for pushing data on load in another store:
http://serversideguy.com/2012/01/31/ext-js-4-merging-store-data/
best regards, hope that helps, write if you need further sugggestion / info on this solution.
If the data is really vital, you can try loading up on memory when the application starts.
Create the stores you need on launch() of the app, load the data and the use it everywhere you want. You can do this on your controller launch() too, to your controller references and granulate this as you wish.
Ext.application({
name: 'Blog',
models: ['Post', 'Comment'],
controllers: ['Posts', 'Comments'],
launch: function() {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'userStore',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
}); }
});
I want to show the data from the following API in List :
http://customer.appxtream.com/astro.apps.cms/jsonFeed.action/?service=astroSportsDataService&action=grabJsonText&mimeType=application/json&p1=HighlightNewsList&p2=EURO2012
when I get the data, the Network of Chrome shows me that all elements have been retrieved but List shows only the data from the last item in the API here is my code:
View
Ext.define('astro.view.HighliteNews', {
extend: 'Ext.DataView',
xtype: 'highliteNews',
config:{
title:'xren',
store: 'highliteNewsStoreId',
itemtap: true,
scrollable:'horizontal',
inline:{
wrap:false
},
itemTpl:[
'<div><img src="{imageLink}"/> </div>',
],
},
});
Store
Ext.define('astro.store.HighliteNewsStore',{
extend: 'Ext.data.Store',
xtype:'highliteNewsStore',
config:{
model: 'astro.model.HighliteNewsModel',
autoLoad: true,
storeId: 'highliteNewsStoreId',
proxy:{
type:'ajax',
url :'http://customer.appxtream.com/astro.apps.cms/jsonFeed.action',
extraParams:{
service:'astroSportsDataService',
action:'grabJsonText',
p1:'HighlightNewsList',
p2:'EURO2012',
mimeType:'application/json'
},
reader:{
type:'json',
rootProperty:'cmsHighlightNewsList',
},
},
}
});
Model
Ext.define('astro.model.HighliteNewsModel',{
extend: 'Ext.data.Model',
config:{
fields: ['imageLink'],
}
});
So the network shows that 3 images are sent from API but the List shows ONLY LAST IMAGE.
Please help
I solved the problem guys :) , there is an conflict between Sencha and JsonP, so if you assign a idproperty to your Model, the problem will be sloved :
config:{
idProperty: 'HighliteIdProperty',
fields: ['imageLink'],
}
A few things I would suggest :
Add a listener to the load event of the store
This is just to check that all the data is load in your store.
You can do it in different ways :
In a controller
store.on({
load:function(){
console.log(store.getCount());
}
});
or directly in the store config with the listeners attribute
listeners:{
load:function(store){
console.log(store.getCount());
}
}
Check the DOM
In the Web Inspector / Firebug, check if your items are there or only the last one.
I think you could also try this command in the console :
Ext.DomQuery.select('div[class=x-dataview-item]').length
It will return the number of items in your dataview.
Set a width and height to your image
I also had the same problem with a dynamically loaded dataview. All the picture were there in the DOM but too small to be seen. So I suggest, you give them a CSS class with a defined width and height.
That's all I can think of for now.
Hope this helps
Thanks Arash for this question and answer. We are facing similar problem and found that we didn't have model defined. Defining the model worked in our case. However, it worked while we retrieved playlist from youtube and now while retrieving the list from google spreadsheet. Hope this helps others who are using google spreadsheet.
adjust the height in the config of view......this might be a problem
I have the following Store declared in my sencha touch application
Ext.define('Sample.store.ImageStore', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.ImageModel',
data: [{ name: "cat", url: "http://bleachthemind.files.wordpress.com/2010/08/cute-bunnys-domestic-animals-2785589-1024-768.jpg" },
{ name: "lion", url: "http://images1.fanpop.com/images/photos/2600000/Cheetah-Family-wild-animals-2603080-1280-1024.jpg" }
]
}
});
This is my code being declared in Model:
Ext.define('Sample.model.ImageModel', {
extend: 'Ext.data.Model',
config: {
fields:['name','url']
}
});
I am facing difficulty to construct a view with carousel where data is being binded from the store mentioned above.Please can i know the right syntax to be written in the view with the carousel consuming store data.
You cannot hook up Store into Carousel in Sencha Touch. It seems that you have to manually do it through some way like this:
yourCarousel = Ext.getCmp('your_carousel_id');
store.each(function(record){
yourCarousel.add({
html: '<img src=' + record.get('url') + '/>'
});
});
Thiem's answer is fine.
If you want a more complete example, have a look at this nice post:
http://edspencer.net/2012/02/building-a-data-driven-image-carousel-with-sencha-touch-2.html
I think it should cover all your needs ;)
Hope this helps.
I have data in an external database which can be accessed via JSON. Now I want to provide different views on these data sets (eg. different sorting, ..). Is it possible to use one single store for this or do I need two stores accessing the same URL except with a different sorter?
My example code looks like this:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonStore',
proxy: {
type: 'ajax',
url: 'http://localhost/index.php?data=MyData&format=json',
reader: {
type: 'json'
}
},
sorters: [
{
direction: 'DESC',
property: 'MyRating'
},
{
direction: 'ASC',
property: 'MyLabel'
}
] } });
And one view should now render a list sorted by the rating and a second one should display a list sorted by the label.
Is there a way to prevent querying the DB twice?
Thanks - I just started out with Sencha Touch and ExtJS --- therefore please excuse my simple question ;)
Somehow I couldn't find any smart solution by asking Google for this basic task..
You don't have to worry about anything unless your two views are presented at the same time. Just re-sort the same store locally.
If they are presented at the same time you will have to create a copy of a store. Otherwise they will show exact same information.
So working though the mostly absent docs on templates - unable to get it to work.
Ext.define('MyAPp.view.Login', {
extend: 'Ext.Component',
xtype: 'welcomeLogin',
config: {
html: 'This shows',
tpl: Ext.create ('Ext.XTemplate', '<div>Please show something</div>', {
compiled: true
})
}
});
Why does the template content now show? I have tried adding apply(), applyTemplate() on and on and on... Please help!!!
#ilija139 is right.
you need to define the data property, even if it's empty.
data: {}
Edit:
Also, the compile attribute isn't needed. It only applies to Ext.Templates not XTemplates (according to the docs). Works the same for me without compile