I am working with ExtJS 4.1.1a and I am trying to create a new theme for both a "tabbedPane" and a normal Panel with and "Accordion" layout. I am having trouble changing the colour of the headers for each. That is to say the tabs and the background for the tabs as well as the header background and font colour for the accordion panel. You can see the current setup at http://robroscoe.ca. I am trying to get the headers for both to be black background with white text and maybe the selected or active tab to be the mat purple that is used in the breadcrumb portion in the navigation bar.
It should be noted that I am attempting to set everything up within ExtJS's SASS preprocessor and any assistance in modifying this instead of the CSS directly would be very much appreciated.
If you haven't yet, you should really start by familiarizing yourself with the approach to theming in ExtJS 4 - http://docs.sencha.com/ext-js/4-1/#!/guide/theming
Once you have a good understanding of the process, the easiest way I've found to theme specific components is by looking through the documentation. With the newer documentation, a lot of the CSS mixins are included along with the API for the components, so it makes it pretty simple to figure out how the default styles are being applied, and then go from their to override/create your own. Here's an example of the Ext.tab.Tab CSS mixin: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Tab-css_mixin-extjs-tab
Related
I am looking to add bootstrap or flatui styling to my ExtJS 5 app. Now, i have done some investigation and tried a few things
Just including bootstrap css and js files directly in app index file. This doesn't work well because extjs default styling seems to override the bootstrap styling. And also, the way sencha buttons and other components are created they have multiple nestings so even if bootstrap styling didn't get overridden, it still wouldn't work well.
Picking up extjs-bootstrap-theme from extjs 4 and adapting it to 5. Only issue with this, it will have very limited bootstrap styling as this is built as a sencha theme.
Has anyone had any experience with this? What would be the best way to go about it? Thanks
If you use ExtJS, you should embrace the ExtJS theming system and guidelines.
As per them, the best way would be to derive a new theme from ext-theme-crisp or ext-theme-neptune, for which you overwrite documented CSS variables and create a new iconset to make the new theme match the look of bootstrap/flatui as far as possible. Only then, when this comes to an end and changes are still required, you can add JS code or custom CSS.
While ExtJS has over 500 CSS variables, my guess is that you would have to change between 20 and 100 of them to make it match very closely.
You should start with the most general variables from Global_CSS like $base-color, and then proceed to the more detailed variables, which are often derived from the general variables. So in the best case, you can skip 100 of them because you already changed $base-color to the correct value.
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
I just start using bootstrap and I have used https://github.com/designmodo/Flat-UI as flat UI design.
Currently I just added https://github.com/Eonasdan/bootstrap-datetimepicker as my datetimepicker. But it seem both css have been fighting with each other.
I able to click on the button of datatimepicker. It straight display the time at the textbox without letting me choose from the dropdown menu (that it should appear). I believe flat UI from designmodo have override the dropdown menu for specific class but too bad I have no idea which part to fix this problem.
Anyone have met the same problem like me? Please guide me from here.
You probably got your answer. But I faced similar issue. I am using https://bootstrap-datepicker.readthedocs.io/en/latest/ and https://github.com/Eonasdan/bootstrap-datetimepicker. Components aren't the same, but I faced same issue. After some analysis, there is a css conflict. Both of them create class .input-group-date. So there's no fight as you mention, but based on css rules(Two css files defining same class), order of css files will define which class will stylize the component and you will have one of components not working properly.
In the past I have used a lot of ExtJS to make dashboards. One of my favorite features is the full-screen viewport with border layout which helps you to split up a dashboard into panels on the left, right, top and bottom, without creating scrollbars everywhere. see e.g. these examples.
Is there a JS library or jQuery plugin that does just this? I am making a dashboard and want to split the screen into panels, but ExtJS is a bit bloated and overkill only to use for the boarder layout.
Ext JS is a great solution for this but if you are looking for something else then the jQuery UI Layout Plugin may be the option you want.
Example:
http://layout.jquery-dev.net/demos/simple.html
Project Home Page:
http://layout.jquery-dev.net/
Twitter Bootstrap provides help for the layout but you have to follow a certain design and am not sure it manages fullscreen apps with no scroll.
I think it's worth a look though.
You may look at Dojo which now integrates well with jquery and has nice widgets (tabs placed on the left for example, grids) and a good layout system.
I have nested tab panels, (outer tab panel groups inner tabs), like the outer panel is Contacts, and then inside it you have a tab panel for each open contact item, another outer panel is Opportunities and in it you have a tab panel for each open opportunity.
This is confusing to users at first, so I would like to add some styling to tab panels, so users can differentiate and give meaning to outer and inner tabs.
I had zero success tough with syling a tabPanel, what is the right way to do it? bodyCfg, tbar, tbarCls, baseClass???? I never dealt with styling a widget in ExtJS and I'm struggling for half a day with no success.
Any pointers on how styling works especially for TabPanels is appreciated.
thanks,
Hazım
I find more than often you need to get your hands dirty with CSS when it comes to styling ExtJS controls.
This is the general strategy that I follow that's been working for me so far.
you need chrome debugger or similar that allows you to view HTML and change CSS styles on the fly.
look at the HTML for the widget in chrome debugger and manually tweak the styles until you find the exact DOM node that you need to style.
Look for a config variable in the widget that allows you to style that node you found in step 2. Most of the variables are named "xxxCls". This takes experience, there is no short cut, for example what you could do is set the "baseCls" and look at the resulted HTML to see where in the DOM tree that class is inserted.
quite often you will find there is no config variable available to style the thing you want (for example the line-height of the header bar in most panels). In this case you will have to overwrite the default ExtJS CSS class to the value you want. Standard good CSS practice applies.