Results 1 to 3 of 3

Thread: [4.2.1] Tab components inherit UI config from parent tab; breaks panel component UIs

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member twasink's Avatar
    Join Date
    Oct 2012
    Location
    Brisbane, Australia
    Posts
    124

    Default [4.2.1] Tab components inherit UI config from parent tab; breaks panel component UIs

    In 4.2.0, you could create a custom component UI for a Ext.panel.Panel, and re-use that for tab panels. The UI parameter was used to create the outer container, but the sub-components (the tabbar and the cards) didn't inherit it.

    In 4.2.1, they do. So if you create a TabPanel like this:

    Code:
          { xtype: 'tabpanel',
            flex: 0.5,
            ui: 'highlight-framed',
            items:[
              { title: 'Framed Tab 1', closable: false },
              { title: 'Framed Tab 2', closable: true },
            ]
          },
    the resulting tabbar and tabs have the 'ui' property set to 'highlight-framed'.

    The problem is that creating a custom UI component for a tab or tabbar is a decent amount of work. You have to create empty custom components for the tab, the tab bar, and the tab panel, as well as provide your own images (or override the image settings to point them back at the default).

    Example app, with two tab panels, and "before" and "after" images attached.
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    This is not a bug. In 4.2.1, creating a custom UI component is the intended path.

  3. #3
    Sencha Premium Member twasink's Avatar
    Join Date
    Oct 2012
    Location
    Brisbane, Australia
    Posts
    124

    Default Not consistent with other components

    Well, in that case the bug is that it's not consistent with similar components.

    Let's go through the subclasses of Ext.panel.Panel:
    * Ext.container.ButtonGroup - sets the ui parameter on contained buttons. This isn't documented
    * Ext.form.Panel - does not pass down the ui parameter
    * Ext.menu.Menu - does not pass down the ui parameter to the contained Ext.menu.Item
    * Ext.panel.Table - does not pass down the ui parameter
    * Ext.tip.Tip - does not pass down the ui parameter
    * Ext.window.Window - does not pass down the ui parameter.

    This needs to be consistent: either
    * components should pass the provided ui parameter down to sub-components; OR
    * components should _not_ pass the provided ui parameter down to sub-components; OR
    * the UIs for sub components should be configured in the one SASS file so that when you make custom UIs you don't have to go hunting for the myriad of places it gets used.


    And if this was an intentional change, it should have been mentioned in the release notes.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •