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

    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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    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

  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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    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

  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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    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

  7. #7
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,378
    Vote Rating
    300
    ssamayoa is a glorious beacon of light ssamayoa is a glorious beacon of light ssamayoa is a glorious beacon of light ssamayoa is a glorious beacon of light ssamayoa is a glorious beacon of light

      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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    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

  10. #10
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    135
    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

Thread Participants: 2