PDA

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.


56453

petr.vecera
17 Jun 2017, 5:07 AM
Hi

The screen is from SA?

Can you share your code?

It looks OK for me:
56457


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


requires: [
'MyApp.view.MyTabPanelViewModel',
'Ext.Container'
],


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.

56458

petr.vecera
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

56459

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: [
'MobileApp.view.MainAppViewModel',
'MobileApp.view.MainAppViewController',
'Ext.Toolbar',
'Ext.Button',
'Ext.Spacer',
'Ext.SegmentedButton',
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.Label',
'Ext.field.Select',
'Ext.field.Toggle',
'Ext.field.Radio',
'Ext.chart.CartesianChart',
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line',
'Ext.chart.interactions.PanZoom',
'Ext.field.Number',
'Ext.chart.series.sprite.PieSlice'
],


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'
},




56460

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

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

Than select tabBar and try to set height of that:

56462

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.

petr.vecera
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.

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

56466

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.

Material
56467

iOS
56468

Triton
56469

New project - Material (Icon only tab)
56470

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.

petr.vecera
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:

56471

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.

petr.vecera
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.