View Full Version : Icon only Tab on Sencha Architect

Joe Kuan
17 Jun 2017, 3:01 AM
The Ext 6.5 modern supports the icon only tab from the kitchen sink. However, I am having trouble getting this to work. The alignment doesn't look right in SA without the title string.


17 Jun 2017, 5:07 AM

The screen is from SA?

Can you share your code?

It looks OK for me:

Ext.define('MyApp.view.MyTabPanel', { extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel',

requires: [

viewModel: {
type: 'mytabpanel'

items: [
xtype: 'container',
iconCls: 'x-fa fa-home'
xtype: 'container',
iconCls: 'x-fa fa-info'
xtype: 'container',
iconCls: 'x-fa fa-search'


Joe Kuan
17 Jun 2017, 5:20 AM
I have to use Panel class in order to set iconCls. SA doesn't let me set iconCls property for Container class.


17 Jun 2017, 5:25 AM
Yeah, that's because by official docs the container doesn't have that config. But you can add any config by clicking on the add icon


You can learn more about it and other useful things in this video https://youtu.be/2wTAdPaG2Xk?t=412

Joe Kuan
17 Jun 2017, 5:40 AM
I must be going insane. I followed your suggestion and still the same.

Here is the code.

Ext.define('MobileApp.view.MainApp', {
extend: 'Ext.tab.Panel',
alias: 'widget.mainapp',

requires: [

controller: 'mainapp',
viewModel: {
type: 'mainapp'
itemId: 'mainapp',
shadow: false,
scroll: {
direction: 'vertical',
directionLock: true

initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
xtype: 'container',
setSmileyFace: function(emot) {
var smiley = Ext.fly(score);
smiley && (smiley.dom.checked = true);
iconCls: 'x-fa fa-cogs',
itemId: 'profile',
style: {
'background-image': 'url(./resources/images/pingbg.png)',
'background-repeat': 'repeat'


17 Jun 2017, 5:47 AM
Weird, let's try this:

Select the tab-panel - in the config panel find tabBar cofing click add

Than select tabBar and try to set height of that:


If that doesn't help try to create completely new class tabpanel, try to do tabs there to see if there is still the same problem. If the problem is not there, try to look what is different there and in the class you have the problem.

Joe Kuan
17 Jun 2017, 5:58 AM
It does set the height of the toolbar but it doesn't adjust the alignment itself. It looks weird.

Looks like I have to either hack the CSS or stick with SA 4.0 which seems a bit more stable.

17 Jun 2017, 6:49 AM
Also one more thing - does it look also this way in the preview of the application ?

Joe Kuan
17 Jun 2017, 6:52 AM
It looks exactly the same as SA 4.1 with Ext 6.2 which doesn't support icon only tab.

It seems to me it doesn't get upgraded properly.

17 Jun 2017, 7:16 AM
Have you tried to recompile the CSS? If not please try that


Also you can try to apply different themes to see if that has any effect.

Joe Kuan
17 Jun 2017, 7:42 AM
I have deleted and reapplied the new themes, just to make sure. I am currently using Material. I have attached the screenshot for all the themes.




New project - Material (Icon only tab)

You can tell the diff in material theme between 2 projects. Something seems not upgraded properly, whereas iOS and Triton look fine but I never had it in the project.

17 Jun 2017, 1:32 PM
Btw and do you have any edits to your theme? I am probably mistaken but it looked like you are using the default colors? You can also try to drop another Material theme into your project.

Or if you are not doing any edits to your theme you can use the default theme from the framework:


Joe Kuan
19 Jun 2017, 12:21 AM
I have tried that. I have even tried deleting & adding a new Material theme. Another thing I have noticed is that when I assign a new base color, it doesn't reflect the color change in the design view. If I publish it, it does show the color change. This only happens to my upgraded project whereas new project on 4.2.1 works fine.

Anyway, it's no point for me worrying about this issue until the 'New tab' bug is fixed. It is too much to keep removing title of each tab.

19 Jun 2017, 3:10 AM
Unfortunately we are not able to reproduce the theme problems during the upgrade. :-?

Could you also try to delete this file .arch-internal-preview.css in your project? It should be located in the root folder or/and in the resources folder.

Also if you want you can share the project with us and we can take a look at it.

Btw the NewTab thing has been fixed in SA 4.2.2 which should be released probably this or next week.

Joe Kuan
19 Jun 2017, 3:17 AM
Thanks Petr. I will wait for 4.2.2 and then revisit this issue again with your suggestion. If problem still occurs, then I will send you the whole xda file. Thanks for being patience and all the help.