Sencha Touch 2 link UI element which can be clicked - sencha-touch

See attachment, I want the "Forgot password" to be a link instead of a button, but I cant find any Link UI element in Sencha which listen for the click event, doesnt it exist?

You can simply use a component and define the html for it, please see the code below:
{
xtype: 'component',
html: '<a href='+'"http://abc.com"'+ '>Forgot your password?</a>',
}

You can use Sencha routes, e.g.:
Ext.define('MyApp.controller.User', {
extend: 'Ext.app.Controller',
config: {
routes: {
'forgot-password': 'forgotPassword'
}
},
forgotPassword: function() {
// Your code here
}
});
Then you can formulate the link using the route name after a hashtag e.g.:
http://myapp.com#forgot-password
More on routes here: http://docs.sencha.com/touch/2-0/#!/guide/history_support

Related

Do we really need to explicitly add Sencha View to Viewport?

In all the examples on Sencha Touch 2 I see code samples like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
Ext.create('MyApp.view.MyView');
}
});
However, the code generated by Sencha Cmd is like:-
//contents of app.js
Ext.application({
name: 'MyApp',
views: ['MyView'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
Ext.Viewport.add(Ext.create('MyApp.view.MyView')); // <--- NOTICE THIS LINE
}
});
Notice that the example code did not add the newly instantiated View to Viewport but the actual code did. Are both codes equivalent? In the example code, how will the View add itself to the Viewport or that is optional?
Ext.Viewport is basically a container with the layout set as 'card'.
In your first sample, the class should have the config option 'fullscreen' set to true.
Setting fullscreen:true will automatically add the comoponent to the viewport when an instance is created.
Ext.define('MyApp.view.test', {
extend: 'Ext.Container',
config: {
fullscreen:true,
html: ['screen2'].join("")
}
});
Ext.create('MyApp.view.test');
From the doc for fullscreen
Force the component to take up 100% width and height available, by
adding it to Ext.Viewport.
In the second sample, a component is added to the viewport. (Don't need the fullscreen option). Like adding a panel into a container.
Ext.define('MyApp.view.home', {
extend: 'Ext.Container',
xtype: 'homecontainer',
config: {
html: ['test'].join("")
}
});
Ext.Viewport.add(Ext.create('MyApp.view.home'));
From the doc for viewport
Because Ext.Viewport extends from Ext.Container, it has as layout
(which defaults to Ext.layout.Card). This means you can add items to
it at any time, from anywhere in your code. The Ext.Viewport
fullscreen configuration is true by default, so it will take up your
whole screen.

Load data into detailed view from list sencha touch 2 MVC

I'm trying to use .setActiveItem to display detailed info on items in a listview (Ext.dataview.List) in a Sencha 2.1 MVC app. The problem is that I can't get the detailed view to load the data.
I've tried many different methods of getting the detailed view to show data including setData, setRecord and Update (see below for some of my latest tries).
Most of the results I keep getting when searching the forums, stackoverflow and google are for sencha apps not using the MVC model.
(Oh, using .push this works fine but due to other reasons I'm moving away from the navigation view).
From my controller:
showDetail: function(list, record) {
/*this.getMain().push({
xtype: 'labdetail',
title: record.fullName(),
data: record.getData()
});*/
//The code above works, but only as long as I stay with navigation view...
console.log("showDetail");
//Ext.getCmp('labdetail').update(record.data);
//LabDetail.update(record.data);
//Ext.fly('labdetail').setData(record.data);
//Ext.getCmp('labdetail').setData(record.data);
//Ext.component('Labblistan.view.LabDetail').destroy();
//Ext.getCmp('Labblistan.view.LabDetail').destroy();
//Ext.fly('labdetail').destroy();
//var DetailView = Ext.create('Labblistan.view.LabDetail'); //If I create the view the console complains I need to destroy previous views with the same ID, hence the different destroy() approaches above
//DetailView.setRecord(record);
Ext.getCmp('mainpanel').setActiveItem('labdetail'); //This navigates to the right view, but it's empty
},
My detailview:
Ext.define('Labblistan.view.LabDetail', {
extend: 'Ext.Panel',
xtype: 'labdetail',
id: 'labdetail',
config: {
title: '{Analysis}',
styleHtmlContent: true,
scrollable: 'vertical',
fullscreen: true,
tpl: [
'<div style=position:absolute;top:50px;><p>Info about {Analysis}</p><p>{Comment}</p></div>'
],
},
});
Don't know if this is best practice but this is how I got it working:
Ext.getCmp('mainpanel').setActiveItem({
xtype: 'labdetail',
title: 'Detaljinformation',
data: record.getData()
});

api2.0p5 No BuildHeader or BuildContent for cardbard.card

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'}
]
}
});

Sencha touch 2 : List shows only last item retrieved from API

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

How to dynamically bind images from store to carousel in sencha touch

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.