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
Related
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.
All,
In messing with the new cards found in 2.0p5, I noticed there is no longer a template available to alter the header or the content of the actual card.
Can someone confirm this is not available, just want to make sure I am not missing it anywhere...
There really is no way to alter the display of the card?
Just for clarity of the post, in 2.0p2 you could do a buildContent function or buildHeader function inside Ext.define of the Card.
The card no longer has a template that you can modify directly, however you can create a custom CardContent plugin to display custom html:
Ext.define('Rally.ui.cardboard.plugin.MyCardContent', {
alias: 'plugin.rallymycardcontent',
extend: 'Rally.ui.cardboard.plugin.CardContent',
getHtml: function() {
var html = this.callParent(arguments);
return html + '<span>mycontent</span>';
}
});
Then configure your CardBoard to use the custom plugin:
Ext.create('Rally.ui.cardboard.CardBoard', {
types: ['User Story', 'Defect'],
attribute: "ScheduleState",
fieldNames: ['Tasks'], // display task information inline on card
cardConfig: {
// overriding plugins to add the custom plugin
// be sure to include the default plugins.
plugins: [
{ptype: 'rallycardheader'},
{ptype: 'rallymycardcontent'},
{ptype: 'rallycardpopover'}
]
}
});
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.
Edit: Upon further examination I discovered that I hadn't included certain namespaces. Adding the relevant name spaces now gives the error:
'myapp.mainpanel has no method setActiveItem'
I am trying to build a sencha touch web app using the card layout mechanism. I make use of the following handler on a button on the landing page:
handler:function(){
myapp.mainpanel.setActiveItem(myapp.cards.vehicleSearchResults, { type: 'slide', cover: false, direction: 'left'})
}
But when I click on the button I get the error: Sencha Touch error: 'myapp.mainpanel has no method setActiveItem'
Does this mean myapp.cards.vehicleSearchResults is undefined?
I define it here:
myapp.cards.vehicleSearchResults = new Ext.Panel({
scroll:false,
layout:{
type:"vbox",
align:"stretch"
},
id: "vehicle-search-results-card",
dockedItems: [myapp.toolbars.searchResultsTitle, myapp.toolbars.searchResultsNav, myapp.toolbars.searchResultsCaption]
})
Any clues as to what I am doing wrong based on the above code?
The setActiveItem() method is only available if the panel has a card layout. Make sure you add the 'card' layout property in your panel definition.