ExtJs Neptune theme

Question

I'm trying to change default theme in ExtJs 4.2 to Neptune custom theme. How to make it for debugging?

<html>
<head>
    <title>xxx</title>
    <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="Scripts/App.js"></script>
</head>
<body></body>
</html>

Yes I use it for deploying, but I need change theme for debugging. — Nail Shakirov, May 24 '13 at 09:39

score 19 · Accepted Answer · edited Jun 07 '13 at 09:24

You must have the following files and folders:

extjs/ext-all.js
extjs/ext-theme-neptune.js
extjs/resources/css/ext-all-neptune.css
extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css
extjs/resources/ext-theme-neptune/images/*.*

And your code as follows:

<html>
    <head>
        <title>xxx</title>
        <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css">
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
        <script type="text/javascript" src="extjs/ext-all.js"></script>
        <script type="text/javascript" src="extjs/ext-theme-neptune.js"></script>
        <script type="text/javascript" src="Scripts/App.js"></script>
    </head>
    <body></body>
</html>

what if you only have the ext-all-neptune and the ext-theme-neptune folder? do you have to preserve the whole directory structure of extjs to be able to use it? — , Nov 14 '13 at 23:01
You need only files listed in post, all other may be deleted. File ext-all-neptune.css and folder ext-theme-neptune enough for neptune style. — ki11en, Nov 16 '13 at 10:52

score 5 · Answer 2 · answered May 24 '13 at 09:46

5

To change to the neptune theme modify line 33 of your sencha.cfg file located in .sencha/app/sencha.cfg to

app.theme=ext-theme-neptune

After doing this run sencha app refresh in your terminal or cammand line

answered May 24 '13 at 09:46

cclerv

2,921
8
35
43

"After doing this run sencha app refresh in your terminal or cammand line" - this is for deploying my application? – Nail Shakirov May 24 '13 at 09:50
1

This will also change your theme while developing. – John Gordon Aug 19 '13 at 17:17

score 3 · Answer 3 · answered Jun 04 '13 at 15:26

I did as @ccerville said but finished with a

 sencha app build

which did some magic to the bootstrap.css and allowed debugging page to use neptune. The 'refresh' didn't seem to make a difference, whereas the build modifies bootstrap.css which is what the 'debug' index.html uses.

Some more info available here : http://senchado.blogspot.ca/2013/03/extjs-42-app-with-custom-neptune-based.html

score -1 · Answer 4 · answered Feb 18 '15 at 05:53

-1

in app.json change line 31 where "theme" define. change it "theme": "ext-theme-neptune"

After doing this run sencha app build in your terminal or cammand line

answered Feb 18 '15 at 05:53

Ashish Gupta

41
5

ExtJs Neptune theme

4 Answers4