Maybe I am missing something but it seems like a bug in Sencha Touch that you can't target TitleBar with specific panels with CSS if you are using the Getting Started template as your base model.
The Main.js (which contains TitleBar) calls all the other panels since the other panels are children of the Main.js where the TitleBar is so the children are not able to set the background color of the parent. In which case if you want the navigation bar (TitleBar) on the bottom of the screen to change colors from the Home.js page to your child pages it is not possible. Has anyone found a workaround for this?
<div class="Sencha-App">
<div class="Panel"></div>
<div class="TitleBar"> </div>
</div>
The problem would be easily solved if if TitleBar was a child of Panel but since it is only a child of your Sencha-App there is no way to make the TitleBar dynamic with CSS. Does this mean that the only thing I can do is use JavaScript to find if there is a class equal to "myPanel" and if so set the background of TitleBar to some color? Or use some architecture other than what they use in the Getting Started tutorial?
May be this can help you......
To change color/style of toolbar you can create your specific UI in .scss file
and compile it using compass which will reflect changes in your .css file
then just set this UI to your toolbar
$base-color: #279806;
$base-gradient: 'glossy';
$base-active:#279806;
#include sencha-tabbar-ui('TabUI', $base-color, $base-gradient, $base-active);
var tabPanel = new Ext.TabPanel({
ui:'TabUI'
});
Related
I have a question concerning scroll positions/behavior in AngularJS.
I have a fixed sidebar with div classes with text (three items no menu) and would like to achieve an opacity change on those classes based upon the current scroll position of the window.
For example, if I reach
<div class="example1">
My goal would be to have the opacity changed on the first item in the sidebar which for example would be called
<div class="sidebar1">
I've found plugins via github for this, but would like to achieve this purely with angular. Does anybody know how to approach this best to avoid messy code and a bloated application?
There's a module you can get via npm here: https://www.npmjs.com/package/ng-inview named ngInView. It will let you call an event whenever an item comes into view. This should get you going in the right direction.
Also on github at: https://github.com/iamssurya/angular-inview
I'm trying to create Custom Form configuration with scrollable TitleArea. The Form (black) has a BoxLayout.Y_AXIS Layout in BorderLayout.CENTER (blue). StatusBar (green) stays in BorderLayout.NORTH (green), when rest of the TitleArea (cyan) is in the first position in BoxLayout.
removeComponentFromForm function is unavailable for using in extended class. How can I remove components from Form to removing titleArea from BorderLayout.NORTH?
Why use the title area at all? Why not just add a component to the top of the box layout Y and style it as a Title that way you can scroll it out?
You can also use the new Toolbar API that includes many abilities to fade out the title as you scroll etc. See:
http://www.codenameone.com/blog/toolbar.html
http://www.codenameone.com/blog/cats-in-toolbars.html
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
I have created a custom theme for my application. The base color of the theme is white. I have a tabpanel on one of my view. There are almost 15 tabs on that view. Not all the tabs can be visible at the same time therefore scrollers are added by default for navigation between tabs at left and right. The issue is the color of the scrollers. With neptune or any other default theme these scrollers are clearly visible but with the custom theme they are plain white. User can't even know that there are srollers there. The scroller image is also not visible. Can someone specify the SAAS variables that configures the scroller appearance? $panel-tool-background-image: 'tools/tool-sprites' or $panel-tool-background-image: 'tools/tool-sprites-dark' do not work either.
The documentation should provide what you need ("CSS Variables" section). There are a few relating to the scroller.
http://ext5-docs.site/#!/api/Ext.tab.Panel
You could also look at using the extjs-tab-panel-ui mixin to create a custom ui for your tab panel:
http://docs.sencha.com/extjs/5.0/core_concepts/theming.html#Creating_Custom_Component_UIs
I have a page where I need to add components in specific order. (render it to a div)
Toolbar
Form
Toolbar
Grid
I have studied the doc and I got confused by all those layouts,containers and panels.
I not sure if I should create first some wrapping component(layout,panel) and then insert the components(form,toolbar,grid) or just create a div for each component ?
I would appreciate an example very much.
It depends on your application. If you are developing a pure (no html at all) extjs application the layout is handled by containers' layout but, if you are mixing html and extjs component, you can handle the layout with your div elements.
From your question it seems you are using html (and div elements) then you can handle it by your self. However, I recomend you create a container (a panel) with a hbox layout and include your componenets as children and let the panel handle the layout.