I am trying to set the 'ui' property of my navigation view to light, but it only shows in the dark theme. Here's my view. What am I missing?
Ext.define('VisitTCMIndy.view.Social', {
extend: 'Ext.navigation.View',
xtype: 'socialcard',
config: {
iconCls: 'chat',
title: 'Social',
layout: 'card',
ui: 'light',
items: [
{
xtype: 'panel',
title: 'Social',
layout: 'vbox',
items: [
{
xtype: 'panel',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Facebook',
src: "resources/images/facebookbutton.png",
flex: 1
},
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Twitter',
src: "resources/images/twitterbutton.png",
flex: 1
}
]
},
{
xtype: 'panel',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Pinterest',
src: "resources/images/pinterestbutton.png",
flex: 1
},
{
xtype: 'image',
baseCls: 'socialbutton',
title: 'Instagram',
src: "resources/images/instagrambutton.png",
flex: 1
}
]
},
{
xtype: 'button',
text: 'Take a Picture',
style: 'margin:3%'
}
]
}
]
}
});
If you mean that you want to change the ui of the navigation bar of the navigation view, then should do this:
config: {
iconCls: 'chat',
title: 'Social',
layout: 'card',
navigationBar: {
ui: 'dark'
}
...
Hope this helps
Related
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'
}]
}]
}
});
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 am trying to define a view but I am getting an error
Uncaught TypeError: Cannot call method 'substring' of undefined
/app/view/Sidebar.js
Ext.define('SimpleTodo.view.Sidebar', {
extend: 'Ext.panel.Panel',
alias: 'widget.sidebar',
config: {
title: 'Projects & Todo Lists',
tbar: [
{
xtype: 'button',
text: 'Add Project'
},
{
xtype: 'button',
text: 'Add Todo List'
}
],
//store: Ext.data.StoreManager.lookup('projects'),
html: 'Hello world',
width: 200
}
});
Then tried to use it in my app.js
Ext.application({
name: 'SimpleTodo',
views: [
'Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
}
});
What am I missing? Have I defined my views and used it correctly?
Actually it must be like that:
Ext.application({
name: 'SimpleTodo',
requires:[
'SimpleTodo.view.Sidebar'
],
appFolder: 'app',
launch: function() {
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'sidebar' // <---- here
},
{
xtype: 'panel',
id: 'detailsView',
flex: 1,
layout: 'card',
items: [
{
xtype: 'panel',
id: 'todoDetails',
title: 'Todo Details'
},
{
xtype: 'panel',
id: 'addProject',
title: 'Add project',
}
]
}
]
})
});
}
});
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
items: [
{
xtype: 'button',
docked: 'right',
height: 29,
hidden: true,
ui: 'back',
text: 'back'
}
]
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
grouped:true,
pinHeaders:false,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
}
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
My Store
I use some codes in my store
sorters:'id',
grouper:function(record) {
return record.get('id')[4];
When i write grouped:true into the list config , app doesn't run. I don't understand the reason.
I want to see same result like kitchensink example userinterface/list/disclosure section.
add this configartion in your store
groupField:'label'
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.