extjs 3.x styling a tab panel - javascript

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.

Related

How to check if an html element is on top of other?

Lets say I have a website where I have some components and main panel. The idea is to take components and add them to the main panel (like a website builder of some sort). And the question is how do I know if I have one component on top of another? Also it would be perfect if i'd know the coverage area size
Note: I dont like the idea of checking positions for every element on this panel. If it can be done with getters or something similar i'd be happy
you can always use "inspect element" option in Google. There are so much option for developers.
and of course if you are developing something you would have an assumption about the initial position, so this is not a problem while doing.

Approaches tested for accommodating RTL on existing angular application

If you have an existing angular application, that already have localization working (i.e text load in different languages) if one of those is RTL direction (Hebrew/Arabic etc) how would you go about writing the code for that?
Remember it's not enough to change the dir="rtl" on those warpper/html. For example elements in nav bar have to be mirrored and floated to right.
Popover (when you hover elements) need to change direction and so the list goes on.
Approaches tested for accommodating RTL:
1.
Setting text direction BEFORE we load the app in our app-load module (Using app_initializer)
In that function we can set the dir attribute on the HTML and lang
Based on the user's local language
Later when we bootstrap our angular application we can look into that html attribute
This (1) I like and want to keep doing.
2.
Using only css/less/sass to change the looks of the site after we have 1 working
Those styles (as we want) will only get applied for languages with rtl direction
But when we tried to rotate (mirror) nav links (in header) and change popover directions things got very tricky.
The order of elements in the html as well as the styles need to change, and for some components the changes were significant, therefore we tried approach number 3.
We can still leverage using this approach with the next ones (combine them) so this is still useful.
On more specifics what didn’t work with less was the use of dispaly: flex on a wrapper elements
With combination of :nth-child(i)
Selectors with order: j;
To rotate elemenst in nav bar
Only things like float: right were successful
Also tested some
-webkit-transform: scaleY(-1);
With combination of display:inline-block;
3.
If we could have a simple way to dictate which templateUrl we load into the components
We could then have for A.compoenent one a.html template (default ltr direction) and another
A-rtl.html based on a condition.
See fore ref:
Angular 2 dynamic template url with string variable?
Essentially splitting the templates into 2 but the HUGE benefit would be that we can have the .ts code once
This will be greatt but I can't get this to work.
Even if it’s possible it seems that it will prevent AOT compilation. (or not?)
See for ref: (old post but still relevant)
https://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/
The angular official documentation approach
https://angular.io/guide/dynamic-component-loader
This is working! The issue is that this isn’t exactly what we want. In this approach we load separate COMPONENTS into a placeHolder and not separate TEMPLATES
4.
This approach is to use *ngIf on the template wrapping our ltr (current template) with
And adding a seperate one below it with
There will be some duplication in this case, but this isn’t really code (it’s HTML) it’s simply markup, plus like this we have much more control on how things look and where, and if we need to use for example popover-rtl component instead of the current popover (which again isn’t currently compatible with RTL) we can EASILY do so.
In this approach there are several simple approaches to determine for every component if we are on ltr or rtl text direction (for the ngIf)
In short is using a baseComponent, or a service.
Note: both approaches 3,4 can use what we did in 1 and 2.
Any suggestion on how to get approach 3 working?
Ideally I can get a condition to determine which templateUrl I should load for the component so the the code in .ts is there for both and only markup is different.
Please suggest on Annular 6+ version if possible.
P.S been using this site for over 10 years almost every day and that is my first questions, thumb me up please :)
Thanks!
although a long time passed from your posting:
create a base component, that will hold all the logic.
create as many components per your liking (one for RTL, one for LTR etc). each component will inherit from the base component. each component will have it's own HTML template, styles etc.
you select which component to show, via routing, ngIf or whatever suites you needs.

ExtJS Theme Modifications Ext.panel.Panel

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

Ext.Layer with a panel in it

I'm trying to figure out how layers in Ext work. The documentation is very concise and I can't find a lot about them anywhere else, other than a forum thread where Jack Slocum says they're very simple.
I have a working tree panel, and what I'm now trying to do is put that in a layer so it floats over the page (it's meant as a helper dialog that pops up next to a form element). I've only gotten as far as creating a simple layer with a <div> element in it, but can't get it to contain more advanced stuff. Looking at the Combo source, which uses a Layer for the option list, also didn't make me much wiser.
So, can someone with a little more experience on this subject please tell me: how are you really supposed to use Ext.Layer? Or am I "doing it wrong"? :)
An Ext.Layer is an extension of Ext.element, rather than being an extension of Ext.Component.
Ext.Element doesn't benefit from all the component config options and methods that say an Ext.Panel does, and so you're going to have a much harder time adding a tree panel to an Ext.Layer than if you added the tree panel to an Ext.Window which already benefits from shim and shadow (the two main reasons you would want to use an Ext.Layer).
But before I would resort to using Ext.Window to wrap the tree panel, I would take a look at the shadow config option in tree panel which should provide the 'floating' effect you want...
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.

Creating js tabs with dynamic content

I need some help regarding tabs.
We are building a intranet portal for our clients, where they will be able to create business cards and more. But we've come to a halt because of problems with tabs.
We need to have a approx 1-4 steps process in tabs. 1 step is to select a business card template. When the template is chosen the next step would be to fill it out.
However each template has different kinds of input fields making the height of the step 2 tab variable.
We've tried using the tabs from Jquery UI, but only the first step is working, since the next step on some templates will be cut off, because of the height.
What is the best way around this problem?
I've used JQuery tabs a lot, and never seen this problem. AFAIK, there is nothing about the tabs themselves that restricts the content that can be put inside them. I would try removing all the logic, html, additional js etc from your tabs, and making the content simple (a series of divs with a fixed height for example). I think you will see that the tabs simply open up to the full height of their contents. Then start adding your code back in until you find whatever it is that restricts the height of your tabs. BTW, I don't think it makes any difference whether they tabs are statically created or loaded via ajax either ...
Can't u also write some code like height() to fix the jquery ui thing? I think jquery ui is the best choice.

Categories

Resources