I have a senchatouch tabbar with 3 button docked at the bottom but the 3 button stay centralized how can I distribute this 3 button in my tabbar to each one have like 33% of width?
This is my tabbar:
https://www.dropbox.com/s/s0semvwywpnsacj/2014-01-03%2015.19.12.png
i want my tabbar looks like this one: https://s3.amazonaws.com/cocoacontrols_production/uploads/control_image/image/2207/iPhone.png
with separeted buttons
In configuration of Ext.tab.Panel you can add configuration for tabBar into tabBar config property. There you can set defaults width of tabBar tabs to flex: 1. Then each tab's width will take same proportion of whole tabBar width.
So your tabBar config should be:
tabBar: {
defaults: {
flex: 1
}
}
See this fiddle for live example: https://fiddle.sencha.com/#fiddle/2f6
Related
I'm trying to customize a single component CSS, avoid to customize all component.
Ext.define('MyApp.tab.Panel', {
extend: 'Ext.tab.Panel',
header:{
xtype: 'myWorkspacesToolbar',
items:[
....
]
},
items:[
....
]
I want to customize only HEADER style and his sub items (added dynamically) and not Panel items.
Using scss file myWorkspacesToolbar.scss for example:
$button-toolbar-color: #F00;
I change all button color (header and panel items and sub items).
Using theme mixing variable I have to set UI for single field in header to obtain CSS changes.
What is the best way to do that?
Use extjs-button-ui mixin for create needed button and set ui property to your button in header
I have a tabpanel as follows-
var topTab = Ext.create('Ext.tab.Panel', {
region: 'center'
});
I am adding tab items on click of a button
topTab.add(someGrid);
this works well. Only the issue is, this grid is not getting fit into the tab item. I want to set layout = 'fit' to this tab.
I tried adding
topTab.items[0].setLayout but it is not working. Also tried giving height to the grid.
Any suggestions. (Using ExtJs 6)
How can I add a panel to the dockedItems of a gridPanel in extended js?
On a gridpanel I need to add a panel to it's docked items on the bottom of it. This will be used for a live newsfeed
I think you can just add the panel to bbar.
bbar:[Ext.create('Ext.panel.Panel',{
width:'100%',
height:100,
title:'Live Feed',
items:[{text:'The Docked Panel'}],
}),{text:'hello'}]
I have created a fiddle.. refer it.JSFIDDLE
I am trying to change theme of sencha application, i want to know how to change background color of all panels and containers of sencha touch app like touchstyle application
I changed the title bar, tab panel color, but i don't know how to change the color of panel and container.
Set the style config.
style: {
background: 'red'
}
EDIT:
You could set the cls config for your panel. E.g: cls: red-bg and in your stylesheet:
.red-bg .x-panel-body{
background-color : red !important;
}
Two ways:
First(Directly change in panel):
new Ext.Panel({
width:200,
height:200,
bodyStyle:{"background-color":"red"},
renderTo: document.body
});
Second(Add CSS class and use it in Panel's 'bodyCssClass' property):
.x-panel-body{
background-color: blue}
How can I control to opacity of a disabled panel with a mask.
I would like to disable to the panel (meaning It will be touchable) and leave its opacity as is.
Thx
You can create your own CSS style sheet that overrides ExtJS's default style sheet for disabled items. In ext-all.css, there are several style configurations for the .x-item-disabled class that you can take a look at. For example, they specify the opacity for toolbar button icons like so:
.x-toolbar .x-item-disabled .x-btn-icon {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
So you'll have to look up what class your panel belongs to and construct a style sheet that includes specification for your particular selectors.
CSS Syntax (Wikipedia)
I would recommend to whoever lands on this post, to create a class for the panel disabled state in your own css file and then configure the panel disabled state class as follows, so you will only affect the desired panel and not the entire application:
In your CSS
.my-disabled-panel {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
And in the panel config...
Ext.create('Ext.panel.Panel', {
[...],
disabledCls: 'my-disabled-panel',
[...]
}