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
Related
I want to select Draw Polygon button from mapPanel toolbar in DistrictMap controller via refs for this purpose i use below selector in DistrictMap controller! but it doesn't work and i see undefined in console!
Ext.define('FM.controller.DistrictMap',{
extend: 'Ext.app.Controller',
refs:[
{
selector: 'mapPanel toolbar > #polygonButton',
ref: 'polygon'
}
],
init: function(){
this.control({
'mapPanel toolbar > button#polygonButton':{
click: this.drawPolygon()
}
});
},
drawPolygon: function(){
console.log(this.getPolygon());
}
i add toolbar to mapPanel with below code.
Ext.define('FM.view.DistrictPanel',{
extend: 'Ext.panel.Panel',
initComponent: function(){
var map = Ext.create('FM.view.MapPanel',{});
map.setPolygonControl();
map.setModifyControl();
map.setSelectControl();
map.addDocked({
xtype: 'toolbar',
dock: 'top',
items:[
{
xtype: 'button',
text: 'Draw Polygon',
enableToggle: true,
toggleGroup: "draw controls",
id: 'polygonButton'
}
]});
above selector can't select toolbar items!
I test 'mapPanel toolbar #polygonButton' for selector but it doesn't work! too for #polygonButton
why selector can't select toolbar items? although if i use only id #polygonButton in selector!
In the above question because districtPanel view doesn't loaded so selector can't select polygonButton in the mapPanel toolbar for fix this problem you should use controller onLaunch function instead of init function. so fixed code is:
Ext.define('FM.controller.DistrictMap',{
extend: 'Ext.app.Controller',
refs:[
{
selector: 'districtPanel mapPanel toolbar #polygonButton',
ref: 'polygon'
}
],
onLaunch: function(){
this.control({
'districtPanel mapPanel toolbar #polygonButton':{
click: this.drawPolygon
}
});
},
drawPolygon: function(){
console.log(this.getPolygon());
}
Your selector implies that FM.view.MapPanel has an xtype of mapPanel. Is it really so?
Also don't forget that controller refs and control selectors are just component selectors. You can open a console in your browser and try different selectors with Ext.ComponentQuery.query().
I am working on an MVC app in Sencha Touch 2 and am having trouble getting a list to display in a nested panel.
The structure of the app has a main view which is a tab panel. One of the items in the tab panel is a defined panel, xtype: 'homepanel'.
An item in this panel is the list xtype: 'newslist' that is linked to the appropriate store and model files.
The list does not display unless I change its parent homepanel to a type, Ext.navigation.View.
What am I missing in the definition of homepanel' as a panel that prevents the display of the list?
Ext.define('ACSO.view.Home', {
extend: 'Ext.Panel', //<--works if Ext.navigation.View
xtype: 'homepanel',
requires: [
'Ext.TitleBar',
'ACSO.view.NewsList'
],
config: {
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
styleHtmlContent: true,
items: [{
xtype: 'newslist'
}]
}
});
Your Panel has no layout.
I suggest you try to add the following in your panel config:
layout:'fit'
Hope this helps
Try adding layout: 'card' to your panel's config
Layout: fit didn't work out for me.
However, adding layout: 'card to the parent Ext.Panel worked!
The UI component which is within the Ext.Panel is no longer hidden via the display: none !important;.
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'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
So I have a TabPanel defined like so:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, faq, about]
});
The home section is defined like so:
home = new Ext.Component({
title: "Home",
scroll: 'vertical',
tpl: [
'<tpl for="."',
' <div messageId="{message_id}">',
' </div>',
'</tpl>'
]
});
Now, ONLY on the home tab, I want a section right underneath the TabPanel that is going to contain some other elements, specifically, a textbox, button, and two dropdowns.
How can I add them so that the content section still acts the same way and doesn't start until underneath these added elements?
It's not 100% clear what your aim is, but it sounds like you just want to stack two panels on top of each other within your 'home' card as below.... If you need to control how much room each sub-item takes up you need to look at layout properties specifically hbox I think.
home = new Ext.Panel({
title: "Home",
scroll: 'vertical',
items: [
{
html: 'first panel'
},
{
tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
}
]
});
Alternatively you might have been talking about having something like a second toolbar, in which case take a look at dockedItems.