new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, about]
});
For the ui, can I specify like, a color instead of dark and light? How can I make it a specific color or background image of our choice?
Thanks.
What you need to do is to define a new ui type using SASS and COMPASS.
So, you have to be familiar with these frameworks.
If you already install these, and you already know how to create you application theme CSS, then you can add the following line to your theme .sass file to define a custom ui
#include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);
As you can see I'm using some variables to set the wanted style.
In details:
$tabs-myUI: Is the Base color for "myUI" UI tabs.
$tabs-bar-gradient: Is The Background gradient style for tab bars.
$tabs-myUI-active: Is the Active color for "light" UI tabs.
You can define how many different UI you want and use them in your code in the following way:
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'myUI',
items: [home, about]
});
This is the official Sencha way to do it.
Hope this helps.
Give your tabPanel or its children a cls attribute. This gives the html tag a class, so you can use it for styling in your CSS.
Obviously after this, you would style it using something like:
background-image: url(...);
background-color: pink;
#AndreaCammarata
I'm able change the tabpanel Color using your above sass.
But I'm to change the active colour of the tabs.
Please find below my code
#include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);
VIEW:
config : {
style: "background-color: white",
ui: 'tabcolour',
tabBar : {
ui: 'tabcolour',
layout : {
pack : 'center'
}
},
layout : {
type : 'card',
animation : {
type : 'fade'
}
},
items : [{
title : 'Descrption',
xtype : 'item_description'
},{
title : 'Photos',
xtype : 'Item_Photos',
}, {
title : 'Comments',
xtype : 'item_add_viewcomment'
}, {
title : 'Videoes',
xtype : 'item_video'
}
]
}
Related
I have the following custom component build
Ext.define('TRA.view.MainMenuItemView', {
xtype: 'mainmenuitem',
extend: 'Ext.Container',
text: 'Menu text',
icon: './resources/icons/Icon.png',
tap: function(){
},
config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
width: '115px',
height: '115px',
style: 'border-radius: 50%; background-color: #e4e4e6',
items: [
{
xtype: 'image',
src: '',
width: '65px',
height: '65px',
centered: true
}
]
},
{
xtype: 'label',
html: '',
margin: '5px 0',
style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;'
}
]
},
initialize: function() {
var me = this;
me.callParent(arguments);
//set icon
me.getAt(0).getAt(0).setSrc(me.icon);
//set text
me.getAt(1).setHtml(me.text);
//setup componet event
me.element.onAfter('tap', me.tap);
}
})
and I'm using it on other containers as this
{
xtype: 'mainmenuitem',
text: 'Signal Coverage',
icon: './resources/images/icon-signal-coverage.png',
tap: function() {
var nav = Ext.ComponentQuery.query('#mainnavigationview')[0];
nav.push({
title: 'Signal Coverage',
html: 'test Signal Coverage'
});
}
}
Quite strangely it all works all well normally except when I build the sencha app for native or for web build using sencha cmd
sencha app build production
the production version does not overwrite icon and text properties of my custom component. while it all works well on normal version. what could be issue?
first of all, some ideas to make your code easier readable for others:
1) the first item does neither have an xtype nor does a defaultType define it
2) width: '115px', height: '115px', just could be width:115,height115
3) instead of me.getAt().getAt() define an itemId for these and use me.down('#theItemId')
3a) or use Ext.Component to extend from and add a template with references. That way it's me.referenceElement
4) me.onAfter('tap',... not sure if this will work on an item that does not support the tap event. you might need to set a tap event to me.element and from there you can use a beforetap
5) instead of add me.getAt().getAt().setText(me.text) use the updateText: function(newValue) {this.getAt().getAt().setText(newValue)}
Same for the icon
then my personal opion
Personally I never expected this code to run anyways. But the fix might be to write me.config.icon and me.config.text
Solution
It's a matter of timing. While the constructor runs there are no icon or text defined inside the config.
This happends only on initialize. there you have them inside the config.
go and add icon: null, text: '' to the config of the component and it will word with getter and setter.
I'm using Sencha Touch 2, I have a PICTO declared in a button, at the moment the picto appears in black color. I would like to change it to color white.
How can I do it?
{
xtype: 'button',
text: 'Settings',
itemId: 'settingsButton',
align: 'right',
iconMask: true,
iconCls: 'settings9'
}
If you take a look at the HTML for a button that contains a picto, it looks like this :
If you click on the span with the x-icon-mask CSS class you can see that the color of the icon is set like so :
So, all you have to do is to add a CSS class to you button (ex: cls: 'myBtn') and then create add the following to your CSS file :
.myBtn .x-icon-mask {
background-color: #123456
background-image:none;
}
Hope this helped
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
Im writing a Sencha touch app that I want to show a popup box that has three buttons. I put a function in a controller that is supposed to display the popup, which it kind of does. My problem is that there is no background or border for the popup, so you can see right through it. Here is an example for my controller
Ext.regController('LoginController', {
'login' : function(options) {
loginPopup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width : 250,
height : 250,
layout : {
align : "center",
pack : "center"
},
styleHtmlContent : true,
items : [Button1, Button2, Button3],
dockedItems : [
{
dock : 'top',
xtype : "toolbar",
title : 'Title'
}
]
loginPopup.show('pop');
All the items and dockeditems show up, but there is no background or border.
I would have posted a pic, but im apparently not reputable
Use sencha-touch.js and sencha-touch.css from same version of Sencha Touch. js and css files are different for every version of Sencha Touch. For development, import the whole Sencha release. See this. For prod keep only files that you require.
set background color for the overlay using the style property
style: 'background-color: color_of_your_choice'
I have a fairly simple Sencha Touch MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?
My viewport:
app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});
//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I then have a controller that fires on an item tap in my list:
app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);
The panel opens but adds to the tabbar as well.
I'd appreciate any pointers!
What you need to do is change the layout of myList and the other tabPanel items to card layout, and call setActiveItem in the context of myList.
When you call setActiveItem directly on the TabPanel, this is the result that you get ( another item being added to the tabBar).
Besides, you don't need to set the layout to card in the TabPanel as it is already card layout by default.
The inner items (myDetail for example) should have a fit layout.