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
Related
I have set a button like this:
xtype: 'button',
icon: 'icons/money_add.png',
text: 'Details',
iconAlign: 'left',
scale: 'small',
I need to change the icon, iconAlign and scale based on some conditions
I managed to change the icon and the scale like this:
buttonPath('#buttonId').setIcon('icons/newIcon.png');
buttonPath('#buttonId').setScale('large');
I need to change the iconAlign from letf to top but it is not working
I have tried
buttonPath('#buttonId').setIconAlign('top');
and it didn't work. Is there any way to change it ?
The button properies you mentioned are bindable. Here is an example of using binding to change the values of buttons. I bind to a boolean for hiding and showing buttons, makes it easy to make the buttons active based on other rules so you don't have to find the button and call a method when something in your app changes.
Button Properties and Binding
I'm ExtJs 6.0 framework developer.
I want to develop a component like date that when user click it, It open a window and this window have some textfields and other Extjs components. My problem is when I want to use this component as a grid cell editor. it does not show the component. In other words, I want to develop a custom picker.
How do I do?
You can extend Ext.form.field.Picker and implement createPicker:
An abstract class for fields that have a single trigger which opens a
"picker" popup below the field, e.g. a combobox menu list or a date
picker. It provides a base implementation for toggling the picker's
visibility when the trigger is clicked, as well as keyboard navigation
and some basic events. Sizing and alignment of the picker can be
controlled via the matchFieldWidth and pickerAlign/pickerOffset config
properties respectively.
You would not normally use this class directly, but instead use it as
the parent class for a specific picker field implementation.
Subclasses must implement the createPicker method to create a picker
component appropriate for the field.
It can look like:
Ext.define('Fiddle.view.FooPicker', {
extend: 'Ext.form.field.Picker',
xtype: 'foo-picker',
createPicker: function(){
return Ext.widget('container',{
padding: 20,
floating: true,
items: [
{
xtype: 'textfield'
},
{
xtype: 'box',
html: 'Foo'
}
]
})
}
});
https://fiddle.sencha.com/#fiddle/1139
Here is a screenshot to visualize what I want to do.
There is an extra tab which is iconless (between exit and project).
The blue highlighted line is the element itself in the inspector.
My goal is to set the tab's width in the tabbar and not in the tabpanel to 5px.
So That it would act has a spacer between tabs' icons.
I tried to manually add a CSS class so that I could create a very specific rule pointing to that element and inside this rule set the width to 5px with an !important tag.
.x-tab .x-tab-normal .x-item-disabled .x-iconalign-center .x-tab-icon .x-layout-box-item .x-stretched
{
width:5px !important;
}
Sadly I never found a way to add a class at that particular level of the component hierarchy.
So I tried to replace an existing CSS class of that component (.x-item-disabled).
I changed .x-item-disabled to .fake and than created a CSS rule accordingly...
It did not work and has in the first case, the component's css classes in the inspector did not changed at all..
I'm pretty sure I need to do it that way since it's not something sencha allows us to do.
Can someone help me out plz?
Ext.tab.Bar and Ext.tab.Tab are private classes and Ext.tab.Panel does not seem to expose that feature, so I guess at the moment there is no simple way to do what you ask. Those tabs are built based on the Panel items configuration, but the data you pass in are not directly mapped to them. Indeed if you apply a cls or style property to an item configuration, that goes to the content of the panel, not to its associated tab. You can however modify the tab after your panel has been initialized:
Try this:
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: '',
iconCls: 'dummy',
html: ''
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
],
initialize: function() {
// get spacer by position, it's ugly but it works
// without extending Sencha components
var spacer = this.getTabBar().getAt(1);
// of course here you could apply a CSS class
// if you prefer
spacer.setStyle('width:5px; min-width:5px;');
// let's also disable the button
spacer.setDisabled(true);
// and remove the icon since it is mandatory in Panel
// config but we don't really want it
spacer.setIcon(false);
}
});
See the fiddle.
Add
this.callParent(arguments);
code in your initialize function in answer 1
I have a toolbar like this:
tbar : {
xtype: 'toolbar',
tooltip: 'Right click to clear',
items: [
{
xtype: 'form',
padding: 2,
height:25
}]
}
My tooltip does not show up. I have done QuickTips.init(). Also, is it possible to include some dynamic text in the tooltip?
In your code, you are attempting to put a toolbar inside of a toolbar. Are you sure that is really what you are trying to do?
Your tooltip probably does not work because tooltip is not a valid property of the toolbar object.
As for dynamically altering the tooltip text, you have the getText(string) method.
According to the ExtJS API documentation, Toolbar does not have a tooltip property. In order to use the tooltip, you'll need to apply the tooltip directly to an HTML element, or use the tooltip on a valid, supported object.
(This is not a question per se, I'm documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)
The Column config for an Ext JS Grid object does not have a native way to allow word-wrapped text, but there is a css property to override the inline CSS of the TD elements created by the grid.
Unfortunately, the TD elements contain a DIV element wrapping the content, and that DIV is set to white-space:nowrap by Ext JS's stylesheet, so overriding the TD CSS does no good.
I added the following to my main CSS file, a simple fix that appears to not break any grid functionality, but allows any white-space setting I apply to the TD to pass through to the DIV.
.x-grid3-cell {
/* TD is defaulted to word-wrap. Turn it off so
it can be turned on for specific columns. */
white-space:nowrap;
}
.x-grid3-cell-inner {
/* Inherit DIV's white-space from TD parent, since
DIV's inline style is not accessible in the column
definition. */
white-space:inherit;
}
YMMV, but it works for me, wanted to get it out there as a solution since I couldn't find a working solution by searching the Interwebs.
If you only want to apply the wrapping to one column, you can add a custom renderer.
Here is the function to add:
function columnWrap(val){
return '<div style="white-space:normal !important;">'+ val +'</div>';
}
Then add the renderer: columnWrap to each column you want to wrap
new Ext.grid.GridPanel({
[...],
columns:[{
id: 'someID',
header: "someHeader",
dataIndex: 'someID',
hidden: false,
sortable: true,
renderer: columnWrap
}]
Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):
.x-grid3-cell-inner, .x-grid3-hd-inner {
white-space: normal; /* changed from nowrap */
}
I didn't bother with setting a style on the td, I just went right for the cell class.
If you only want to wrap text in certain columns and are using ExtJS 4, you can specify a CSS class for the cells in a column:
{
text: 'My Column',
dataIndex: 'data',
tdCls: 'wrap'
}
And in your CSS file:
.wrap .x-grid-cell-inner {
white-space: normal;
}
Other solution is that:
columns : [
{
header: 'Header',
dataIndex : 'text',
renderer: function(value, metaData, record, rowIndex, colIndex, view) {
metaData.style = "white-space: normal;";
return value;
}
}
]
The best way to do is by setting the cellWrap to true as below.
cellWrap: true
Its working well in EXTJS 5.0.
use
cellWrap: true
If you still want to use css always try to work with ui's, variables, etc. within themes, or set the style with the style property.