Adding Button to TabPanel - sencha-touch-2

I want to add regular Sencha button to TabPanel in Sencha Touch 2
Sencha Fiddle http://www.senchafiddle.com/#tRd76
Code:
//define the application
Ext.application({
launch: function() {
addTabPanel();
}
});
function addTabPanel(){
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
fullscreen: true,
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}]
},
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
},
{
title: 'Favorite',
iconCls: 'favorites',
html:'Favorite',
itemTpl: '{mwRow}',
}
]
});
}
When Adding Button1 to TabPanel button is not shown.
Why Button1 is not Showing ?
Please help?

Here's a quick way to do it. I'm not sure there is another way...
Ext.application({
launch: function() {
addTabPanel();
var tp = Ext.ComponentQuery.query('tabpanel')[0];
var btn = Ext.create('Ext.Button',{
width:80,
height:30,
text:'BTN',
style:'position:absolute;top:auto;bottom:13px;left:5px;z-index:10;'
});
tp.element.insertFirst(btn.element);
}
});
function addTabPanel(){
Ext.Viewport.add({
xtype: 'tabpanel',
tabBarPosition: 'bottom',
fullscreen: true,
tabBar:{
dockedItems:[{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}]
},
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
},
{
title: 'Favorite',
iconCls: 'favorites',
html:'Favorite',
itemTpl: '{mwRow}',
}
]
});
}
Here's the fiddle : http://www.senchafiddle.com/#HvTek
Hope this helps

put code snippet into Home item, something like this,
....
items:[
{
title: 'All Market',
iconCls: 'home',
html: 'Home',
items: [
{
xtype: 'button',
ui: 'round',
text: 'Button1',
dock: 'left',
handler: function(){
alert('Botton1 Working Now');
}
}
],
},
...
I hope this helps. :)

Related

How to scroll in Ext.Container

Below is my view. how can I make my menu scroll separate and my view scroll separate
Ext.define('HaBoMobile.view.AboutView', {
extend: 'Ext.Container',
xtype: 'aboutViewType',
html: 'Learn more about me',
styleHtmlContent: true,
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
config: {
fullscreen: true,
items: [{
docked: 'top',
xtype: 'titlebar',
items: [{
text: 'Menu',
action: 'nav',
iconCls: 'list'
}]
}]
}
});
I tried all these settings, none worked
scrollable : {
direction : 'vertical',
directionLock : true
},
overflowY: 'auto',
autoScroll: true,
here is a Sencha fiddle
Just try with scrollable: true, like this:-
var menu = Ext.create('Ext.Menu', {
scrollable: true, // add this property
width: 200, // Need to set a width
items: [{
text: 'Close',
ui: 'decline'
}, {
text: 'Home',
action: 'nav_option',
iconCls: 'home'
}, {
text: 'Settings',
action: 'nav_option',
iconCls: 'settings'
}]
});
Containers:-
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
xtype: 'mainview',
config: {
scrollable: true,
html: 'Main page',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Main',
items: [{
text: 'Nav',
action: 'nav'
}]
}]
}
});

Tab Panel behaviour breaks when something is added to Tab Bar Dynamically

I tried adding this.callParent(arguments) to the tab panel's initialize event
as suggested by http://www.sencha.com/forum/showthread.php?234909-tab-panel-doesn-t-switch-between-tabs-when-added-dynamically but I get:
Uncaught Error: this.callParent() was called but there's no such method (doFire) found in the parent class (Ext.Base).
Could someone point me in the right direction?
Thank you.
My controller follows:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
mytabpanel: '#mytabpanel'
}
},
init: function(application) {
this.control({
mytabpanel: {
initialize: function(component, options){
var bar = component.getTabBar();
bar.insert(0, { flex:1, xtype:'toolbar', title: '' });
bar.insert(bar.getItems().length,
{
xtype: 'toolbar',
flex: 1,
title: '',
items: [
{
xtype : 'button',
docked: 'right',
ui: 'round',
iconCls: 'info',
iconMask: true,
handler: function(){
}
}
]
});
this.callParent(arguments);
}
}
});
}
});
My view follows:
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
id: 'mytabpanel',
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info',
html: 'tab 1'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info',
html: 'tab 2'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html: 'tab 3'
}
],
tabBar: {
docked: 'bottom'
}
}
});
EDIT Sunday, 30 December 6:57 a.m (GMT - 4:00)
From searching the web I now believe that because I am overriding initialize then I need to call the superclass' initialize method so that its code will be executed as well. As pointed out by user1479606 calling this.callParent will never work. So, the question becomes: How do I call the superclass' initialize method?
I think your application won't work in your case because you should use this.callParent(arguments) in your view not your controller otherwise your parent class will always be Ext.Base.
For easier to understand and better approach, why don't you follow the Sencha Touch 2 convention like this:
config: {
refs: {
mytabpanel: '#mytabpanel'
}
control: {
mytabpanel: {
initialize: 'domytabpanel'
}
}
},
domytabpanel: function(component, options) {
var bar = component.getTabBar();
bar.insert(0, {
flex:1,
xtype:'toolbar',
title: ''
});
bar.insert(bar.getItems().length,
{
xtype: 'toolbar',
flex: 1,
title: '',
items: [
{
xtype : 'button',
docked: 'right',
ui: 'round',
iconCls: 'info',
iconMask: true,
handler: function(){
}
}
]
});
}
Hope it helps :)

Add (right) Button to Sencha Navigation View

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

How to align elements inside a tabPanel in Sencha touch

I have this simple tabBar inside a TabPanel:
MyApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
tabBar: {
dock: 'bottom',
layout: {
type: 'hbox',
align: 'stretch'
},
},
items: [
{ xtype: 'homecard', id: 'home'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'spacer'},
{ xtype: 'settingscard', id: 'settings'},
],
});
I'd like to be able to make 'elements' float left, center and right, adding bunch of spacer's isn't a 'really' good choice.
Any idea on how to achieve this ?
By default the spacer component will take up a flex of 1 unless a width is set. Which I think means to put a button on each side of the tabBar you should only need 1 spacer as long as you don't specify a width. However the tabBar must have a different default layout to the toolbar which works:
MyApp.views.Viewport = Ext.extend(Ext.Panel({
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
defaults: {
handler: function (btn, e) {
MyApp.views.Viewport.setActiveItem(Ext.getCmp(btn.value));
}
},
items: [{
text: 'homecard',
value: 'home'
}, {
xtype: 'spacer'
}, {
text: 'settingscard',
value: 'settings'
}],
layout: {
type: 'hbox',
align: 'center'
}
}],
items: [{
title: 'homecard',
id: 'home',
html: 'home'
}, {
title: 'settingscard',
id: 'settings',
html: 'settings'
}]
});
you might be able to overload the tabBar to display the same as a toolbar but i wouldn't hold my breath.
NB: stretch : Components are stretched vertically to fill the container.

make tabpanel in a tab of another tabpanel. in sencha-touch

I'm trying to make a small application with sencha-touch and I have a tabpanel with the layout card. when I click on tab Producten a card slides in but what I want is that in that card comes another tabpanel so people can choose between Men and Women with also a layout card.
I tried a lot of stuff and nothing seems to work.
var rootpanel;
var panel;
Ext.setup({
onReady: function() {
var Home = {
cls: 'home',
title: "Home",
html: "Homepagina"
}
var Producten = {
title: "Producten",
html: "Productenpagina",
items: [
panel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: 'true',
ui: 'plain',
layout: 'card',
items: [Men, Women]
})
]
}
var Men = {
title: "Men",
html: "men"
}
var Women = {
title: "Women",
html: "Women"
}
var Winkelwagen = {
cls: 'winkelwagen',
title: "Winkelwagen",
html: "Winkelwagenpagina"
}
rootpanel = new Ext.TabPanel({
cls: 'toolbar',
fullscreen: true,
ui: 'plain',
layout: 'card',
items: [Home, Producten, Winkelwagen]
})
}
})
try this codes :
Ext.regApplication({
name : 'MyApp',
launch : function(){
window.localStorage.clear();
new MyApp.MainTabPanel({
fullscreen : true
});
}
});
MyApp.MainTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'bottom',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'center'
}
},
cls: 'card1',
html: '',
items: [
{ iconCls: 'time', title: 'Time', xtype: 'TimeTabPanel'},
{ iconCls: 'user', title: 'People', xtype: 'PeopleTabPanel' }
]
});
Ext.reg('MainTabPanel',MyApp.MainTabPanel);
MyApp.PeopleTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'user', title: 'Man' , html: 'MAN TAB'},
{ iconCls: 'user', title: 'Woman', html: 'WOMAN TAB' }
]
});
Ext.reg('PeopleTabPanel',MyApp.PeopleTabPanel);
MyApp.TimeTabPanel = Ext.extend(Ext.TabPanel,{
fullscreen: true,
tabBar: {
dock: 'top',
scroll: 'horizontal',
sortable: true,
layout: {
pack: 'left'
}
},
cls: 'card1',
items: [
{ iconCls: 'time', title: 'AM', html: 'AM TAB' },
{ iconCls: 'time', title: 'PM', html: 'PM TAB' }
]
});
Ext.reg('TimeTabPanel',MyApp.TimeTabPanel);