Results 1 to 8 of 8

Thread: Theming on my application

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    7

    Default Theming on my application

    Hi,

    I need to create a theme for our application using sencha command, I followed the tutorial http://docs.sencha.com/extjs/4.2.1/#/guide/theming , creating a workspace , a simple application and everything has been good.
    Now the problem is I want to create a theme based on the application that we have developed. This App has the basic structure according to this tutorial: http://docs.sencha.com/extjs/4.2.1/#/guide/getting_started, and not within any workspace (like theming tutorial).


    I also try the solution on this post http://www.sencha.com/forum/showthread.php?263082 but I get the message:
    Unable to locate 'framework.dir' property from sencha.cfg
    Please Ensure Executed this command was valid framework from a directory
    Non-framework directory


    How I can create my own theme for this application already developed using sencha command?

    Extjs version: 4.2.1.883
    Sencha command: v3.1.2.342


    Thank you very much.

  2. #2
    Sencha User
    Join Date
    Sep 2011
    Posts
    574

    Default

    You can create a workspace with theme package and then just use it's built resources.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    7

    Default

    How?
    I mean, how i "insert" my application into a new workspace and i link this app with a new theme?
    Could you explain the steps to do that?
    There is no way to do this without create a workspace?
    Thank you.

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    574

    Default

    You don't need to 'insert'. You can simply create a theme and modify build.xml to copy built files elsewhere.
    Another possible solution - generate stub app with same name by sencha cmd and then overwrite with your source files.

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    7

    Default

    Thanks,

    I did that, was hard but it's working.Now i have another problem:
    I create a theme for this application , but i don't know how "re use" the css file that i had for this application.
    If a use bootstrap.css it's only works (partially) when I start my application from the build folder, if i start index.html. from myapp folder doesn't works (bootstrap.css points to build folder).

  6. #6
    Sencha User
    Join Date
    Sep 2011
    Posts
    574

    Default

    Strange, bootstrap.css is usually update with path to latest built css. What do you have there?

  7. #7
    Sencha Premium Member
    Join Date
    Jul 2013
    Posts
    7

    Default

    Basically my structure is:
    -workspace
    -ext
    -myApp
    -app
    -appExt
    -gantt
    -ux
    -patch
    ......
    -packages
    -app-theme
    ....
    in my index.html I have many css references :

    .....

    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all-gray.css">
    <link rel="stylesheet" type="text/css" href="appExt/ux/css/GroupTabPanel.css">
    <link rel="stylesheet" type="text/css" href="sass/src/view/myapp.css">
    <link rel="stylesheet" type="text/css" href="appExt/ux/calendar/resources/css/calendar.css">
    <link rel="stylesheet" type="text/css" href="appExt/ux/css/CheckHeader.css">
    <link rel="stylesheet" type="text/css" href="portal.css">
    <link rel="stylesheet" type="text/css" href="appExt/gantt/resources/css/sch-gantt-all.css">

    <link rel="stylesheet" href="bootstrap.css">
    ......


    'myapp.css' is the old css (which i used in my app when a i had not workspace),
    I still need to integrate this css with my "app-theme" and i don't know if i can import it in some place in my theme or i need to recreate everything.

    I know that I need to remove all the references to css from my index.html and keep only bootstrap.css, but where i put all those references to be imported by bootstrap.css (before and after the build?

    Thanks

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Posts
    574

    Default

    Here is excerpt from build.xml with approach I've used:
    Code:
        <target name="-before-build">
            <concat destfile="${build.dir}/_base.scss">
                <header>@charset "utf-8";
                </header>
                <file file="${workspace.dir}/../../../assets/base.css"/>
            </concat>
        </target>
    
        <target name="-before-sass">
            <concat destfile="${app.out.scss}.tmp">
                <header>@charset "utf-8";
                </header>
                <file file="${app.out.scss}"/>
            </concat>
            <move file="${app.out.scss}.tmp" tofile="${app.out.scss}"/>
            <concat destfile="${app.example.scss}.tmp">
                <header>@charset "utf-8";
                </header>
                <file file="${app.example.scss}"/>
            </concat>
            <move file="${app.example.scss}.tmp" tofile="${app.example.scss}"/>
        </target>

Posting Permissions

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