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.