I'm trying to add a button (right aligned) on the toolbar of a nestedlist. Here is my code :
Ext.define('Test.view.NestedList', {
extend: 'Ext.Panel',
requires: ['Ext.dataview.NestedList'],
xtype: 'mynestedlist',
config: {
modal: true,
centered: true,
layout:'fit',
width:'80%',
height:'80%',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: 'MyTreeStore',
initialize: function(){
console.log("Add the button on the toolbar");
this.getToolbar().add({xtype: 'spacer'});
this.getToolbar().add({xtype: 'button', iconCls: 'compose', ui: 'plain', action: ''});
}
}]
}
});
The button does not align to the right of the toolbar but appears to the left.
Does anyone have an idea to make this ?
Thank you
One thing you can do is try adding a titlebar to your nestedlist and then align the button right.
Related
What is the proper way to change the back button text?
Ext.define('myapp.view.post.PostDetail', {
extend: 'Ext.Panel',
alias: 'widget.postdetailpage',
xtype: 'postdetailpage',
config: {
navigationBar: {
config: {
//change the back button text?
defaultBackButtonText: 'Go Back',
useTitleForBackButtonText: false
}
},
scrollable: 'vertical',
styleHtmlContent: true,
tpl: ['{content}'],
}
});
The backbutton text is set in the navigation view before displaying the detailed view.
Ext.define('mimo.view.PostPanel', {
extend: 'Ext.NavigationView',
xtype: 'postPanel',
requires: [
'mimo.view.post.PostList'
],
config: {
title: 'Blog',
iconCls: 'home',
// set the back button text here
defaultBackButtonText: 'Volver',
items:[{
title: 'Las entradas de blog',
xtype: 'postlist'
}]
}
});
</pre>
You are extending Ext.Panel. Ext.Panel does not accept the navigationBar configuration, you probably want to use Ext.navigation.View. Then on that view you can pass the defaultBackButtonText property. Otherwise if you want to customize the button further, inside of navigationBar object you want to specify a button object with button properties.
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
I want to dynamically add a (right aligned) button to the active navigation view depending on view Im showing. Is there any proper way to do it? I found many half good examples online, but didnt get them to work. Here is what I tried:
Ext.define('Sencha.view.user.Login', {
extend:'Ext.navigation.View',
//fullscreen: true,
xtype: 'loginview',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],
config: {
title: 'Log in',
iconCls: 'use',
cls: 'kidsbackground',
scrollable: false,
navigationBar: {
items: [
]
},
items:[
{
xtype: 'loginform'
}
]
},
addRightButton:function(button){
var navigationBar = this.config.navigationBar;
console.log("navigationBar: "+navigationBar);
var rightButton = Ext.Button.create({
xtype: 'button',
ui: 'action',
iconCls: 'action',
iconMask: true,
align: 'right' });
console.log("rightButton: "+rightButton);
//navigationBar.addItem(rightButton);
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
}),
Ext.create("Ext.Button", {
text: "Button2",
align: "right"
})
]
};
this.setNavigationBar(oNavigationbar);
/*this.setNavigationBar({
items: [
{
id: 'rightButton',
xtype: 'button',
text: 'yes!'
//placeHolder: 'Search...',
//align: 'right'
}
]
});*/
console.log("wow, no crash, really ?");
}
});
When I run the above code I get strange errors, one of this is this (see attachment):
You can try this code (in Chrome Developer Tools' console) on the Sencha Touch 2 Navigation View example :
Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add({
xtype:'button',
text:'Right',
align:'right'
});
It basically get the navigationview, then the navigation bar of this view and finally add the button to it.
This is the proper way to add a button to the navigation bar.
Hope this helps
different way
var navigationView = Ext.create('Ext.NavigationView',
{
useTitleForBackButtonText: false,
scrollable: false,
layout:
{
type: 'card',
animation: null
},
navigationBar:
{
items:
[
{
xtype: 'togglefield',
name: 'smsmode',
align: 'right',
value: 0,
disabled: true
},
{
text: '',
iconCls: 'delete',
align: 'right',
ui: 'back',
listeners:
{
tap: function()
{
navigator.app.exitApp();
}
}
}
]
}
});
I'm using Sencha Touch, at the moment I'm adding to the view some HTML code and underneath a button. I would like have the content of the HTML code together with the button to be in the centre of the screen.
Could you suggest me how to do it? thanks for your time
Ext.define('Project.view.SettingsSuccess', {
extend: 'Ext.Panel',
xtype: 'settingformsuccess',
config: {
title: 'Settings',
iconCls: 'info',
cls: 'settings-success',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Settings',
items: [
{
xtype: 'spacer'
},
{
text: 'Back',
ui: 'back'
}
]
},
{
html: [
'<p>You have successfully authorised.</p>'
].join("")
},
// Go to Dashboard Button
{
xtype:'button',
text: 'Visit your Home Page',
ui: 'normal'
}
]
}
});
Try that:
Pack the Html Content and the Button in a Container:
http://docs.sencha.com/ext-js/4-0/#/api/Ext.container.Container
Place the Container where you want, see the setPosition(..) Method:
http://docs.sencha.com/ext-js/4-0/source/Component3.html#Ext-Component-method-setPosition
Long story short: I've got a mainPanel which consists of a tabBar on the bottom and a docked toolBar on top.
From a tabPanel that is selected, I have elements inside of it, in this case other buttons. On a button tap, I want to load a different panel that I've created, which is not one of the tabBar panels.
So I'm hiding the current tabPanel and showing the panel that is tied to the button click. I can get it to show up. The issue is that the panel that shows doesn't render correctly until I actually rotate the device. The image / items on the panel are usually off to the bottom right.
Sometimes the toolbar that I have attached to the new panel disappears completely as well. I'm clueless as to why this is happening, and hoping someone can explain to me what I need to do. I'm using the latest version of Sencha Touch 1.x.
fyi: this is a xpost from (http://www.sencha.com/forum/showthread.php?171567-Loading-another-panel-causes-incorrect-rendering...&p=710474#post710474). I wasn't getting an answer that made sense so I'm coming to SO for hopefully some assistance.
Code Snippets Below:
INITIAL TAB FROM TABPANEL
var TAB1 = {
title: "TAB1",
layout: 'vbox',
items:[
{html: "<h1>TAB1</h1>"},
panel2_btn, panel3_btn, panel4_btn,
{flex: 1},
{html: "<h3>EMAIL US</h3>"},
sevenday_btn
],
iconCls: 'TAB1',
style: "color: #2e2e2e; font-family: 'Arial'; font-weight: bold",
}
BUTTON FOR NEW PANEL
var panel2_btn = new Ext.Button({
centered: true,
cls: 'button',
text: 'TAP FOR PANEL2',
handler: function(e){
mainTabPanel.hide();
viewStack.push(panel2);
panel2.show();
}
});
PANEL THAT BUTTON TAP SHOULD LOAD
var panel2 = new Ext.Panel({
id: 'panel2',
layout: 'vbox',
fullscreen: true,
dockedItems: [
backToolbar],
items: [
{flex: 1},
{html: "<h1>PANEL 2</h1><img src='resources/assets/panel2.png' id='panel2'/>"},
{flex: 1}
]
});
TAB PANEL
var tabPanel = new Ext.TabPanel({
id: 'tabPanel',
dock: 'bottom',
styleHtmlContent: true,
tabBar: {
cls: 'tabBar',
dock: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical',
layout: 'hbox'
},
items: [TAB1, TAB2, TAB3, TAB4, TAB5]
});
MAIN PANEL CREATION
var mainPanel;
Ext.setup({
tabletStartupScreen: 'startup-splash-logo.png',
phoneStartupScreen: 'phone-startup-splash-logo.png',
icon: 'icon.png',
glossOnIcon: true,
fullscreen: true,
onReady: function(){
mainPanel = new Ext.Panel({
id: 'mainPanel',
fullscreen: true,
dockedItems: [
toolbar
],
items: [tabPanel],
layout: 'card',
scroll: 'vertical'
});
}
});
TOOLBAR CREATION
var toolbar = new Ext.Toolbar({
id: 'mainToolbar',
dock: 'top',
cls: 'toolbar',
layout: {
pack: 'justify',
align: 'center'
},
items: [
{xtype: 'spacer'},
logo,
{xtype: 'spacer'}
]
});
LOGO
var energy_fitness_image = new Ext.BoxComponent({
centered: true,
cls: 'energy_fitness_logo'
});
There are a couple of things that I've noticed in your code, although your code snippets fall short to fully understand how your views are structured:
First of all, try adding the element before hiding the active one
viewStack.push(panel2);
mainTabPanel.hide();
panel2.show();
You could call panel2 or the viewport's doLayout() method after adding it
If you don't strictly need tabs, try using a viewport with a card layout. You can switch between them with setActiveItem() and you can add new ones to the viewport with the panel's add() method instead of using an array like you're doing right now.