i try to add a button in a navigationBar of a navigationView with possibility to push a new view when i tap the button. I need help because i don't understand how i can do that. My button is ok and i can log tap action in my console but i can't push a new view. I need to have a view which is docked to my tabbar...
What i want in fact is proposing to user the possibility to change the view : with the button he could switch views : navigation / list to carousel (with same datas from a store). All is ok with navigationview and my list of results but i can't add the carousel view possibility by tapping the button...
My first question would be, is it possible ? If yes then how can i do that ?
My code :
Ext.define("MyApp.view.Annuaire", {
extend: 'Ext.navigation.View',
xtype: 'annuairepanel',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store'
],
config: {
/*IMPORTANT : évite une erreur de clsReplace...*/
autoDestroy: false,
title: 'Annuaire',
iconCls: 'address_book',
defaultBackButtonText: 'Retour',
navigationBar: {
items: [
{
xtype: 'button',
id: 'carousel-annuaire',
iconCls: 'more',
iconMask: true,
align: 'right',
listeners: {
'tap': function() {
console.log('tap !');
}
}
}
]
},
items: [
{
xtype: 'list',
id: 'liste-annuaire',
cls: 'x-liste-annuaire',
itemTpl: [
'<div class="vignette-liste" style="background-image:url({_ann_www_pub});"></div>',
'<div class="titre-liste">{post_title}</div>',
'<div class="categories-liste">{categories}</div>'
].join(''),
title: 'Annuaire',
grouped:true,
indexBar:true,
store: 'Annuaires',
}
]
}});
Thanks for your help
Ben
Do you not confusing why NavigationView is used for? The use case for it is create a stacked pool of Panels (Ext.Panel and/or Ext.form.Panel) and do navi.push(view)/navi.pop() to easy navigating in eg. Master-Detail relation.
First it is not intended to add a List as a direct child of the Navi View.
Also the good practice is using of the Sencha MVC Controllers. I'm advising you to start with reading basic concepts in Sencha doc page:
http://docs.sencha.com/touch/2-0/#!/guide/controllers , http://docs.sencha.com/touch/2-0/#!/guide/views and other guides.
I do not say there are perfect Getting Start sources but there is something.
If you want to get more close look at Sencha buy a commercial book.
Tip, never buy Jesus Garcia's books
I'd prefer issues from Packt Publishers.
Cheers, Oleg
Related
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()
});
We created a telephone directory Sencha touch mobile application for our company. We have a requirement to dial a employee by tapping the phone number in the employee details screen which should trigger dialing the phone. To achieve the same we used the code highlighted in green color which works in iOS and Andorid Icecream (Tested in older version of Samsung) but failing in Jellybean OS.
Can someone help us how to overcome this or what is the best way to make it work in all the devices.
Ext.Viewport.setActiveItem({ xtype: 'adminstaffdetailview', styleHtmlContent: true, html: adminStaffDetailsTemplate,
listeners: {
tap: function( tap, element ){
if(tap.delegatedTarget.id == 'rowPhoneTap'){
window.location = "wtai://wp/mc;[" + tap.delegatedTarget.innerText.trim() + "]";
}
},
element: 'element',
delegate: 'tr'
}});
Ext.Viewport.unmask();
}
Why not using a link with tel protocol instead of a window location to call ?
You need to set data to your tpl (phone_number)
Ext.Viewport.setActiveItem({
xtype: 'adminstaffdetailview',
styleHtmlContent: true,
tpl: ['call'], // your template adminStaffDetailsTemplate,
});
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.
Iam using sencha touch for building mobile application, Ia m using card layout switch in my tab panel. sometimes the card layout is not working properly. Please help me regarding this.
App.views.TabPanelView = Ext.extend(Ext.TabPanel, {
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'horizontal'
},
items: [item1, item2,item3,item4,item5]
}
}
First you should change horizantal to horizontal
simple Just Put cover: false in your cardSwitchAnimation. Hope it works
I am using the Sencha Touch framework for the development of my iPad application.
I am in need of using Map as a part of the screen(say half a page). When I try to do put a map component into my page, its covering the full page overlapping the previous components.
Please share your suggestions.
Thanks in advance,
Easwar
Please post some code to show what you have done / tried yourself so far.
Anyway, I think you're looking for the method: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-cfg-dockedItems
var panel = new Ext.panel.Panel({
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Docked to the top'
}]
}]
});