I have just like website, side menu. which is different menu items, I want to display if click one tab then display related information in the next view. if again click next button display in same view. only change button view is same.
Here more clear of these images.
How to do this in sencha, I am very new in sencha. Thank you advance.
You will want to use a Card layout for the main body. See the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.Card
For the side navigation, you can use simple components that change the active item of the card layout using listeners on the elements of the components (for example, use singletap event for the element: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dom.Element-event-singletap).
items: [{
items: [
{
html: 'Student',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(1);
}
}
}
},
{
html: 'Teacher',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(2);
}
}
}
}
]
},
{
id: 'myCardLayout',
layout: 'card',
items: [
{
//student panel
},
{
//teacher panel
}
]
}]
Note that this is pretty sloppy code (it is not MVC, it uses Ext.getCmp, etc), but it is just intended to give you the concept of what should work for you here.
Related
I have a list and each item links to a different page when clicked on using push(). I am pushing them fine but when they do, they don't have the default titlebar or back button that should come with a page pushed on top of the current one. Any ideas? Here is my code:
View being pushed:
Ext.define('myApp.view.Appearances', {
extend: 'Ext.Panel',
xtype: 'Appearances',
config: {
title: '<span class="logo"></span>',
scrollable: 'vertical',
tpl: [
'<h1>Appearances</h1>'
]
}
});
Controller:
this.getMain().push({
xtype: 'Appearances'
});
You need to use NavigationView for that: http://docs.sencha.com/touch/2.1.1/#!/api/Ext.navigation.View
//here is my carousel view which display some images on carousel code is below
Ext.define("App.view.GView",
{
extend:'Ext.Carousel',
xtype:'GView',
requires:[
'Ext.carousel.Carousel',
'Ext.Img',
'Ext.Loader'
],
config:{
title:'XYZ',
iconCls:'home',
layout:{
type:'vbox',
pack:'center',
align:'center'
},
directionLock:true,
fullscreen:true,
items:[
{
docked:'top',
xtype:'titlebar',
cls:'titleBar',
title:'Gallery'
}
],
xtype:'carousel',
id:'gallerycarousel'
}
});
//Here is my controller code which binds data to
var items = []; Temp array
var xyz= [{ urlL}] My image array
Ext.each(images, function (picture) {
items.push({
xtype: 'image',
cls: 'centerImage',
src: picture.url
});
});
floorCarousel.setItems(items);
floorCarousel.setActiveItem(0);
//My question is to how to add another carousel on the top this carousel that when i move first carousel item than second carousel item also should move and vice verse.. So first carousel is at bottom on top of that i need small size carousel Please help me out little tricky .,,
I'm confused. do you need to know how to create the carousel, or do you just need to know how to make the 2nd carousel move with the main carousel?
Problem:
I switch Panels using setActiveItem() according to question-answer on this link
App.views.viewport.getActiveItem().setActiveItem(App.views.Panel, { type: 'slide', direction: 'left' });
Everything works fine, but how can I access my back button?
I suspect that theres only 1 back button, and I have to change his properties (text, handler).
How Can I do that?
Thank you, Shlomi.
P.S- when thinking about it, I have to modify all the bar properties - its title as well.
I will try to answer this question referencing the previous question about panels.
First add a back button to your panel's top bar.
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos",
items:[{
xtype: 'button',
text: 'Back',
handler: function () {
}
}]
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
After that when user goes to next page, access the back button and change it's handler(I won't prefer to change handler, I prefer build a stack mechanism to go bacward but it is your choice :) ).
Mobz.views.viewport.getActiveItem() //panel
Mobz.views.viewport.getActiveItem().dockedItems.items[0] // toolbar
You are seeking back button;
Mobz.views.viewport.getActiveItem().dockedItems.items[0].items.items[0] // back button
Mobz.views.viewport.getActiveItem().dockedItems.items[0].title // toolbars title
{
xtype: 'button',
text: 'Back',
handler: function () {
App.views.viewport.setActiveItem([The panel you want to go], {type: 'slide', direction: 'right'});
}
}
Add a button in your "App.views.viewport" panel.
I have a fairly simple Sencha Touch MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?
My viewport:
app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});
//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I then have a controller that fires on an item tap in my list:
app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);
The panel opens but adds to the tabbar as well.
I'd appreciate any pointers!
What you need to do is change the layout of myList and the other tabPanel items to card layout, and call setActiveItem in the context of myList.
When you call setActiveItem directly on the TabPanel, this is the result that you get ( another item being added to the tabBar).
Besides, you don't need to set the layout to card in the TabPanel as it is already card layout by default.
The inner items (myDetail for example) should have a fit layout.
I'm making an iPhone app, I've got a simple segmented button in sencha touch and when I click a reset button in my settings form I want the segmented button to change the pressed button to default.
I've got something like this:
view:
var typPanel = new Ext.Panel({
layout: {type: 'hbox', pack: 'center'},
items: {
xtype: 'segmentedbutton',
id: 'dumbyt',
items: [
{
text: 'Dum'
},
{
text: 'Byt',
pressed: true
}
]
}
});
in the reset button controller i've got
setdefault: function(options) {
...
realio.views.settingsPanel.getComponent('dumbyt').setPressed(0);
}
I also tried assigning id to each button and call .setPressed('id'); but it didn't work too, any ideas?
Thanks.
Look at the arguments for setPressed:
Link