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'
}]
}]
}
});
Related
Am I missing something? Generated code below image.
List works fine independantly of the tab... can you not put a list inside a tab container or is there an option i additionally need? Thanks Greg
Ext.define('MyApp.view.MyTabPanel', {
extend: 'Ext.tab.Panel',
config: {
items: [
{
xtype: 'container',
title: 'Home',
iconCls: 'info',
html: 'Welcome',
itemId: 'home'
},
{
xtype: 'container',
title: 'About',
iconCls: 'info',
html: 'Awsome',
itemId: 'about'
},
{
xtype: 'container',
title: 'Stylists',
iconCls: 'info',
html: '',
itemId: 'contact',
scrollable: true,
items: [
{
xtype: 'list',
docked: 'top',
styleHtmlContent: true,
itemTpl: [
'<div>{fname} {lname} {title}</div>'
],
store: 'LSstylistStore'
}
]
}
],
tabBar: {
docked: 'bottom'
}
}
});
Needed to Add Layout: Type: Fit, which made the list display inside the tab container. In Architect select the tab containing the list and in Ext.Container layout option select "fit"
xtype: 'container',
title: 'Stylists',
iconCls: 'info',
html: '',
itemId: 'Stylists',
layout: {
type: 'fit'
},
scrollable: true,
I have this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"
i'um using a top toolbar and bootom toolbar into a panel like this:
var panel = new Ext.Panel({
fullscreen: true,
renderTo: 'pnlLogin',
layout: {
type: 'vbox',
align: 'left'
},
items:[
{
xtype: 'textfield',
flex: 1,
id: 'ioUser',
label: 'User'
},
{
xtype: 'textfield',
flex: 1,
id: 'ioPwd',
inputType: 'password',
label: 'Password'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Restricted Area'
},
{
dock : 'bottom',
xtype: 'toolbar',
ui: 'light',
items: [
{
text: 'Login',
ui: 'confirm-round',
handler: function(b,e){
btnLoginClick();
}
}
]
}
]
});
the problem is BOTTOM TOOLBAR not appears!!
it appears only after i move my tablet!!
how can i solve it?
i need that it appears after panel render!
thanks!
Where is btnLoginClick(); method ?
if the file which cantent this method is load after this panel then this problem may happens...
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.
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);