1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    aliakakis is on a distinguished road

      0  

    Default Sencha Designer custom widgets

    Sencha Designer custom widgets


    I have a project in which a library of custom widgets should be created. Each custom widget will have to include the javascript code with underlying functionality and a custom CSS style. Moreover, various effects e.g. slide, fade might be added as well. I wanted to inquire whether I can use Sencha Designer and Ext JS 4 in order to undertake this project. Thank you.

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Yes, if they are completely new widgets that you have already developed, you can include their javascript and css via the resource manager in Designer (coming in the next beta).

    You will have to write your own javascript to instantiate these new widgets you wrote. (They will not automagically be available in the Toolbox with drag/drop/gui design features available.)
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    aliakakis is on a distinguished road

      0  

    Default


    Thank you for the quick reply. In case I want to build custom widgets by using the designer's widgets available in the toolbox and then export the final result? For example add a button into a viewport, add effects, add css styling from within the designer and export the project.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Yes, you can do that. With the below limitations:

    We don't have support for editing of custom css yet.
    The css also will not apply at design time, only at runtime in the browser/or on the device
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    aliakakis is on a distinguished road

      0  

    Default


    Apologies for the late reply. I can add custom CSS after the widget is exported though?

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    You can add additional css by going to settings, Resources and then adding additional css files.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,329
    Vote Rating
    212
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    Quote Originally Posted by aconran View Post
    You can add additional css by going to settings, Resources and then adding additional css files.
    Where are stored those resources?

    Limited to js and css or images can be added?

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    aliakakis is on a distinguished road

      0  

    Default


    Great news. Then how do I reference it? By using the class name of the component inside the CSS? Are there any examples? Thank you.

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by ssamayoa View Post
    Where are stored those resources?

    Limited to js and css or images can be added?

    Regards.
    JS and CSS. It's just a url. They can be relative to your project (stored within it) or it can be absolute, stored on google.com.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  10. #10
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by aliakakis View Post
    Great news. Then how do I reference it? By using the class name of the component inside the CSS? Are there any examples? Thank you.
    Yes, you use the css class and/or rules you've defined in css.

    We don't have any examples quite yet, but there will be some.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 2