ExtJS4 - Change font size of TabPanel title text - javascript

I need to change the text of the title of the tab in a TabPanel, but I don't want that this will affect every other TabPanel in the application, just this TabPanel.
I tried adding a CSS class by the cls property, by the itemCls property, and by this:
defaults: {
cls: 'aClass'
}
The CSS:
.aClass {
font-size: smaller;
}
But they all look the same:
Nothing seemed to work. How am I able to achieve that?

You should indeed use the cls property on your tabpanel and then have a custom CSS selector that would only point to that tabpanel:
See here: http://jsfiddle.net/49Dc8/
JS
Ext.require('Ext.tab.*');
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
cls: 'mytab',
width: 450,
plain: true,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text'
},{
contentEl:'markup',
title: 'Long Text'
}]
});
});
CSS
.mytab .x-tab-inner{
font-size: 13px;
}

Related

Remove outline from extjs button

I know that in order to remove the dotted outline from a link I need to do the following:
a, a:active, a:focus {
outline: 0 !important;
}
However, when using extjs buttons, this does not work.
I have tried setting borders to none and also using outline: none !important. However, none of these things work. Also, I've tried giving it outline none to .x-btn, .x-btn-focus, .x-focus, etc. with no results.
Can anyone help me? I am testing using Ext JS 5.1.1.451 Classic.
EDIT: I am terribly sorry. I don't know how to share the Sencha Fiddle. Here is the test code. This uses Extjs 5.1
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width: 500,
items: [{
// xtype: 'button', // default for Toolbars
text: 'Button'
}, {
xtype: 'splitbutton',
text: 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{
xtype: 'tbspacer'
}, // same as ' ' to create Ext.toolbar.Spacer
'text 2', {
xtype: 'tbspacer',
width: 50
}, // add a 50px space
'text 3']
});
}
});
You can try to click the button and see the link outline.
This is what I am referring to:
Also, if it helps, I am using Chrome on Debian.
Override the following CSS:
.x-btn-focus.x-btn-default-toolbar-small .x-btn-wrap {
outline: 1px dotted #333333;
}

How to apply style for Ext js xtype tabpanel using style property?

I want to change style for Ext.tab.Panle element by writing inline css structure as like the following xtype : button element
{
xtype: "button",
itemId: "imageUploadButton1",
text: "Uploader",
style: {
background : '#C81820'
}
}
I want to change the style of tab-panel's header by writing css like this in a Json format. Is it possible?
Following is my tabpanel elemental structure:
{
xtype:"tabpanel",
activeTab:0,
items:[{
xtype:"panel",
title:"SHOPABLE IMAGES",
},{
xtype:"panel",
title:"LAYOUT SETTINGS"
},{
xtype:"panel",
title:"HOTSPOT SETTINGS"
}]
}
Thanks.
The tab headers are instances of Ext.tab.Tab, which are created dynamically by the tab panel. You can provide a tabConfig configuration on the tab panel's items to customize them, and since they're subclasses of Ext.Component, of course you can also set the style config:
items:[{
xtype: "panel",
title: "SHOPABLE IMAGES",
tabConfig: {
style: {
background: '#C81820'
}
}
},{
xtype: "panel",
title: "LAYOUT SETTINGS"
},{
xtype: "panel",
title: "HOTSPOT SETTINGS"
}]
Fiddle: https://fiddle.sencha.com/#fiddle/o7c

How to add Columns in Ext.js within ext.panel.Panel

Im designing a screen in which the header has a button with certain functionality. To acheive this I used
Ext.panel.Panel
Now I want to add columns within this screen below the header.
This is my code:
var screen = Ext.create('Ext.panel.Panel', {
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
layout: 'column',
items: [{
text: "column1",
width: .5
}, {
text: "column2",
width: .5
}]
})
The error Im getting is that I can get the button to work on the header, but cannot see the columns. Is there a solution to fix this?
I have also included the image. The black rectangle shows how my columns are appearing.
In both Ext 4.1.1 and Ext 4.2.0 the following changes are required in your code:
Rename property text to title in the columns config
In the same config, rename property width to columnWidth
Add renderTo: Ext.getBody() attribute
jsfiddle seems to impose some limitations on how extjs panel is rendered. While I am not sure what's the issue with jsfiddle, here is a Plunker link that displays panel as expected.
IMO, ExtJs GridPanel is a better way to add tool bar to your panel and display tabular data. Read more about it in Sencha docs
I finally worked out the solution for my question. I needed a button functionality in the header and also columns which could have functionality like arranging the items in ascending/descending order etc (basically the grid.column)
var screen = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Search',
tools: [{
xtype: 'button',
text: 'Click',
//code here for button functionality
}],
items:
[{xtype: 'gridpanel',
columns: [
{
header : "Column 1",
width: .5
},
{
header : "column2",
width: .5
}],
}],
});

Extjs 4.1 - How to create tabpanel without window or container?

I would like to create tabpanel so it opens when I click on button.
I can create it inside window like so:
var window = new Ext.Window({
id: 'item1',
closable: true,
floating: true,
collapsible: true,
width: 900,
height: 600,
autoScroll: true,
items : mytabpanel
}).show();
but I am wondering how I can do it without window?
it seems like show() doesn't work with tabpanel.
I'm not entirely sure what you're trying to achieve, assuming your code to create the tab panel is correct then I don't see why your code wouldn't work.
If you don't want to render the tab panel in a window, you can always render it to an actual DOM element instead by using the renderTo property.
e.g.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.getElementById('component'),
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
Where "component" is the id of a container element (E.g. a DIV) within your HTML page. If you call that within the onclick event of the button, hopefully it should do what you require.
If you want a component to float you should use floating mixin

check item icon in sencha

I am new at Extjs and Sencha. i started to design my UI and i could successfully add an iconCls with buttons. now i need to add icon to a checkitem menue http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.menu.CheckItem
but i couldn't ! even though i use iconCls property.
anyone have done this before ?
If you just want the icon right next to the text, you can just insert an image after the menu item is rendered
Ext.create('Ext.menu.Menu', {
width: 100,
height: 200,
floating: false,
renderTo: Ext.getBody(),
items: [{
xtype: 'menucheckitem',
text: 'select all',
listeners: {
render: function(comp) {
Ext.DomHelper.insertAfter(comp.getEl().down(".x-menu-item-icon"), {
tag: 'img',
src: "http://flyosity.com/images/_blogentries/networkicon/stepfinal2.png",
width: 16,
height: 16
});
}
}
}]
});
Ideally, you'd create a plugin or a subclass so you can reuse this functionality. The above code does not realign the separator, it's single separator for the entire menu, but it should give you a head start

Categories