1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    15
    Vote Rating
    0
    jwatson is on a distinguished road

      0  

    Default Custom Button UI Frustrations

    Custom Button UI Frustrations


    Details: Sencha Cmd 3.1.0.239 and ExtJS 4.2

    In my app, I have a custom theme that is extending Neptune, as defined in the recently published theming documentation. I am trying to create a custom button UI, specifically one which will live in a toolbar.

    Since Neptune already has a "plain" example, I did the following:
    • I copied the entire src/button/Button.scss into my theme
    • Adjusted the values as needed
    • Changed as the "ui" names in the file (npblue is my ui)
    • Added this to my sass/example/manifest.js
      {
      xtype: 'button',
      ui: 'npblue-toolbar'
      },
      {
      xtype: 'button',
      ui: 'npblue'
      }
    • Finally did a sencha package build.
    The screenshot generated looks like this:

    capture.png

    When I actually view build/example/theme.html in Chrome, I see the following: theme-html-chrome.png

    theme-html-chrome.PNG

    When I view the same in IE8, however, I see the following: theme-html-iexplorer.png
    theme-html-iexplorer.PNG

    I have confirmed that all of the images for the button have successfully generated, but they are not getting applied to the elements, primarily (I presume), because the buttons in IE are not getting the "frame" applied to them as the default ui ones are.

    I have been battling this issue for several hours now, and am growing increasily frustrated with this entire process. Does anyone have any guidance about how to add a simple button UI that will actually work with non-CSS3 capable browsers?

    Thanks

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    15
    Vote Rating
    0
    jwatson is on a distinguished road

      0  

    Default


    Wow, okay, I just figured out the issue.

    Originally, I had run sencha generate theme mytheme from the root of my ExtJS app. This generated a theme without issue, and for the most part it worked (notwithstanding the issues I mentioned above).

    On a whim, I moved my entire them into the ext/packages folder, ran sencha package build from their, and everything worked...perfectly.

    I am glad it worked, but frustrated with my wheel spinning

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    csdhong is on a distinguished road

      0  

    Default


    Can you explain more on how to fix it?

    I have the same issue. in IE, there is no frame on the button when I add custom ui in .scss file.

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    15
    Vote Rating
    0
    jwatson is on a distinguished road

      0  

    Default


    Quote Originally Posted by csdhong View Post
    Can you explain more on how to fix it?

    I have the same issue. in IE, there is no frame on the button when I add custom ui in .scss file.
    Sure. Basically, I moved the entire package from myapp/packages to the sdk root (e.g., 4.2.0/packages). Then, I re-ran the build from the new location, and it worked.

    I don't know why, only that it worked

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
    csdhong is on a distinguished road

      0  

    Default


    Yes. compile from the app does help. Thank you very much

    Is there any one know how to make the app/packages/my-theme/build 's version work?

Thread Participants: 1