TabControl - Buttons at bottom

[gerhardhziegler]

Dear friends,

does anyone of you have an idea, how I could style a TabControl, so that the buttons are shown at the bottom of the panel (also arranged like they are hanging at the botton).

I found some information on the sencha Website with the TabPosition Property of the "Ext.tab.Panel", but it seems not to work or even causes an error.

Any suggestions greatly appreciated!


Gerhard Ziegler
Wien & Berlin

[Sherzod]

Hi,

 

http://forums.unigui.com/index.php?/topic/5317-change-tab-position-of-pagecontrol-to-bottom/&do=findComment&comment=27214

 

Best regards,

[gerhardhziegler]

Excellent. Thanks a lot!

Is there somewhere a description or overview about all the properties of the panel I can set? I tried to search the sencha-Docu, but didnt find any good examples?

Best regards Gerhard

[gerhardhziegler]

and, i just saw the buttons are ordered the right way but they are still at the top of the panel :|

[Sherzod]

Hi,

 

and, i just saw the buttons are ordered the right way but they are still at the top of the panel :|

 

Can you clarify ?!

 

And which edition and build are you using ?!

 

Best regards.

[gerhardhziegler]

well, the "button bar" should be at the bottom of the TabPanel.
If i use   sender.tabPosition = "bottom"  they appear like "hanging" (right appearance but still at the top if the panel).

https://www.dropbox.com/s/t6dg0w68l22tr4g/uni.png?dl=0

 

JS Version 4.2.5.1763

UniGui 1.0.0.1391

[Sherzod]

JS Version 4.2.5.1763

UniGui 1.0.0.1391

 

Commercial Edition ?!

[gerhardhziegler]

Yes, UniGui Professional Edition, bought 10/11/2016

[Sherzod]

Ok, Thanks,

 

Then, first please visit here:

http://forums.unigui.com/index.php?/topic/6291-important-announcement/

[gerhardhziegler]

done! Didnt know you need it in the registration!

[Sherzod]

Is it OK for you ?!

 

[gerhardhziegler]

This would be excellent, but how can I get it? tabPosition=bottom isnt enough. as I saw.

[Sherzod]

No, just follow the instructions:

http://forums.unigui.com/index.php?/topic/5317-change-tab-position-of-pagecontrol-to-bottom/&do=findComment&comment=27214

[gerhardhziegler]

I did. The buttons changed to hanging but the still were at the TOP of the panel.

https://www.dropbox.com/s/t6dg0w68l22tr4g/uni.png?dl=0

 

I made a screenshot. the first TabControl is without patch.

the second is with code, like you recommanded tabPosition = "bottom". As you can see, the buttons changed a little bit but but they are still at the top of the panel.

[Sherzod]

UniPageControl1 -> ClientEvents -> UniEvents -> Ext.tab.Panel [tabPanel] -> tabPanel.beforeInit:

 

not function beforeInit

 

function tabPanel.beforeInit(sender, config)
{
    sender.tabPosition = "bottom"
}

 

[gerhardhziegler]

I swear, I did it!!! 

https://www.dropbox.com/s/i3z7dwc14vq7733/ungi.png?dl=0

 

^^ Screenshot from Delphi IDE.

Also I have a "inner panel"?

 

 

 

UniPageControl1 -> ClientEvents -> UniEvents -> Ext.tab.Panel [tabPanel] -> tabPanel.beforeInit:

 

not function beforeInit

 

function tabPanel.beforeInit(sender, config)
{
    sender.tabPosition = "bottom"
}

 

tabPanel.png

[Sherzod]

Can you make a simple testcase for this?

[gerhardhziegler]

the code: https://www.dropbox.com/s/xwoofdfgkui763i/Testprojekt.rar?dl=0

the screenshot: https://www.dropbox.com/s/nxmcbona8by8w86/Screenshot_1_Uni.png?dl=0

[Sherzod]

Ok, sorry you are using UniTabControl

[gerhardhziegler]

seems its not possible there?

Thanks anyway a lot, maybe I will find another solution by sizing that thing.

 

[Sherzod]

I will try to find a solution

[gerhardhziegler]

That would be great if its possible.

Meanwhile I have so many other questions concerning the "Accordion" layout and the tree grid (I wrote in another post). Seems I couldnt find a lot of new components in my installation.

 

And yes: Thanks a lot!

[Sherzod]

Hi,

 

Can you try to use this approach for now (although, maybe isn't the optimal solution) ?!:

 

1. ClientEvents  -> UniEvents -> [Ext.tab.Panel]

function tabPanel.beforeInit(sender, config)
{
    config.tabPosition = "bottom";
}

2. ClientEvents  -> UniEvents -> [Ext.panel.Panel]

function boxready(sender, width, height, eOpts)
{
    var me=sender;
    if (me.items.items.length == 2) {
        var item1 = me.items.items[0];
        var item2 = me.items.items[1];
        var _y = item1.getY();
        item1.setY(_y+item2.getHeight()-1);
        item2.setY(_y);
        item2.setHeight(item2.getHeight()-item1.getHeight());
        item2.anchor = "0 -" + (height-item2.getHeight());
    }
}

 

Best regards,

[gerhardhziegler]

Thanx I lot, but it doesnt work. Sorry, maybe I am too stupid.

 

I tried to write the second Code "Boxready" to the beforeInit of ext.panel.panel (i need to select one of the events, as I understood). 

But it crashes with an ajax error. Unexpected token function?

Should I put the code to afterCreate? Or AjaxRequest? Or AjaxCallback?

[Sherzod]

Hi,

 

2. ClientEvents  -> UniEvents -> [Ext.panel.Panel]

 

Sorry, correct: ClientEvents  -> ExtEvents -> [Ext.panel.Panel] -> function boxready