Walkthrough Ext JS 4.2 custom themes

Source: Internet
Author: User

Walkthrough Ext JS 4.2 custom themes

This article is a walkthrough based on the descriptions in the API documentation to familiarize yourself with the custom theme process.


Exercise environment:

  • Sencha Cmd v4.0.1.45

  • Ruby 1.9.3-p392

  • Firefox 26


First, run the following Sencha Cmd command to create an application named TestMyTheme:

sencha -sdk c:\ext4 generate app TestMyThemec:\TestMyTheme


In the command, the parameter sdk declares that the directory where the framework file is located is the ext4 directory of drive C; generate is the commands command), which indicates what to create, and app indicates that the application is to be created; myTheme is the name of the application to be created. In this way, the created application uses TestMyTheme as the namespace: \ TestMyTheme "indicates that the application will be created in the TestMyTheme directory of drive C.


After an application is created, run the following Sencha Cmd command to convert the application to a Web service to preview the effect:

sencha fs web -port 8000 start -map c:\TestMyTheme


In the command, the fs command indicates that the function command will be used; the web command indicates that a simple Web server is created; the port parameter defines the access port for the use case. port 8000 will be used here; start indicates that the server is started; the last path indicates the Access Directory pointed to by the Web server.


After the command is executed, if the following prompt is displayed, the Web service has been started successfully:

Sencha Cmd v4.0.1.45[INF] Starting shutdown listener socket[INF] Listening for stop requests on: 49331[INF] Mapping http://localhost:8000/ toc:\TestMyTheme...[INF] Starting http://localhost:8000[INF] jetty-8.1.7.v20120910[INF] NO JSP Support for /, did not findorg.apache.jasper.servlet.JspServlet[INF] startedo.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}[INF] started o.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}[INF] Started SelectChannelConnector@0.0.0.0:8000Sencha Cmd v4.0.1.45[INF] Starting shutdown listener socket[INF] Listening for stop requests on: 49331[INF] Mapping http://localhost:8000/ toc:\TestMyTheme...[INF] Starting http://localhost:8000[INF] jetty-8.1.7.v20120910[INF] NO JSP Support for /, did not findorg.apache.jasper.servlet.JspServlet[INF] startedo.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}[INF] started o.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}[INF] Started SelectChannelConnector@0.0.0.0:8000Sencha Cmd v4.0.1.45[INF] Starting shutdown listener socket[INF] Listening for stop requests on: 49331[INF] Mapping http://localhost:8000/ toc:\TestMyTheme...[INF] Starting http://localhost:8000[INF] jetty-8.1.7.v20120910[INF] NO JSP Support for /, did not findorg.apache.jasper.servlet.JspServlet[INF] startedo.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}[INF] started o.e.j.w.WebAppContext{/,file:/C:/TestMyTheme/}[INF] Started SelectChannelConnector@0.0.0.0:8000


Enter the following address in the browser, as shown in figure: http: // localhost: 8000/


650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/140107/0Q502K94-0.png "style =" float: none; "title =" 1.PNG" alt = "wKioL1LH6kXClA0QAAAfgKOl_mo335.png"/>


We can see that the classic topic is currently used. Create a custom topic. Switch to the C: \ TestMyTheme directory and enter the following command to create a custom topic:

sencha generate theme MyTheme



After the command is executed, switch to the C: \ TestMyTheme \ packages directory and you will see an additional MyTheme Directory, which is used to create a directory for a custom topic. The current topic is extended from the classic topic, and needs to be extended from the Neptune topic here, so you need to enter the MyTheme directory and open the package. json file. Modify the value of the extend attribute to ext-theme-neptune.


Next we will test the custom topic. Switch to the C: \ TestMyTheme \ packages \ MyTheme directory in the DOS window, and enter the following command to generate a custom topic:

sencha package build


After the topic is generated, open the sencha. cfg file under the C: \ TestMyTheme \. sencha \ app directory. Find app. theme in the file and find the following statement:

app.theme=ext-theme-classic


The statement shows that the topic currently used is a classic topic. To use a custom topic, you need to change ext-theme-classic to MyTheme. After the modification, switch to the C: \ TestMyTheme directory in DOS and enter the following command to generate the application:

sencha app build


After the generation process is complete, refresh the browser to see the effect shown. The theme has been replaced with a custom theme inherited from the Neptune theme ).


650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/140107/0Q502F29-1.png "title =" 2.PNG" alt = "wKioL1LH6qqz0VOxAAAXB8cEscY308.png"/>


Next we will study how to modify the topic. Generally, there are two main ways to modify theme variables, one is to modify theme variables, and the other is to directly define your own styles. To modify the variable value, you must go to the C: \ TestMyTheme \ packages \ MyTheme \ sass \ var directory. to directly define your own style, you must go to C: \ TestMyTheme \ packages \ MyTheme \ sass \ src directory. For details about the modification method, refer to the files in the packages \ Ext-theme-neptune \ sass \ directory in the ext JS package.


For example, to modify the background color of the tab Bar, you can create a directory named tab under the C: \ TestMyTheme \ packages \ MyTheme \ sass \ var directory and create a directory named Bar. scss file. You can find Ext. tab. the CSS variable code of Bar background color is $ tabbar-base-color, in Bar. add the following code to the scss file to modify the background color of the tab bar:

$tabbar-base-color: #ff0 !default;


After the modification, run the "senccha app build" command in the C: \ TestMyTheme directory to generate an application. The background color of the tab bar is yellow.


If you want to directly modify the background color of the panel subject but do not want to modify the variable value, you can create a directory named panel in the C: \ TestMyTheme \ packages \ MyTheme \ sass \ src directory, create a Panel in the directory of the new cut. and then add the following code to the file:

.x-panel-body-default {    background:none repeat scroll 0 0 #00f;}


Style x-panel-body-default is the default style used by the panel subject. Here, the background color is changed to blue. After the application is regenerated, the background color of the Panel is changed to blue.


After running the packaging command, you can find the packaged css file in the C: \ TestMyTheme \ packages \ MyTheme \ build \ resources directory, copy the css file and images directory to the project to use a custom topic in the project.


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.