PDA

View Full Version : [CLOSED] Green Theme For Ext.Net Controls



hemantpatil
Jan 15, 2014, 4:51 AM
Hi,

i want to have light green theme for my application (using ext.net controls). i m using Ext.Net V 2.2

can anybody help me in this regard.

Daniil
Jan 15, 2014, 11:34 AM
Hi @hemantpatil,

Please clarify do you already have an ExJS theme file and asking how to apply it to an Ext.NET application?

Or are you asking how to implement a new theme from scratch?

hemantpatil
Jan 16, 2014, 4:28 AM
Hi @hemantpatil,

Please clarify do you already have an ExJS theme file and asking how to apply it to an Ext.NET application?

Or are you asking how to implement a new theme from scratch?

Yes, I have extJS theme file generated using http://playground.ideashs.com/themescolor/. i want to apply this theme to Ext.Net V2.2 Control.

what i want to achieve is, i want a Light Green Theme for the ext.net control. it can be either ways , using extjs theme or implementing a new theme from scrach.

any help would be greatly appreciated.

Daniil
Jan 16, 2014, 4:33 AM
Well, it is a tool to generate a theme for ExtJS 3.

Ext.NET v2 is based on ExtJS 4. So, this tool is not appropriate. I mean a theme generated by this tool just won't work.


or implementing a new theme from scrach.

It is quite a challenge task. Please follow this thread:
http://forums.ext.net/showthread.php?25098

hemantpatil
Jan 16, 2014, 4:56 AM
Thanks for the reply Daniil,

i'll have a look at the thread n get back to you.

hemantpatil
Jan 18, 2014, 4:21 AM
It is quite a challenge task. Please follow this thread:
http://forums.ext.net/showthread.php?25098

Hi Daniil,

i gone through the thread and i managed to set the grey theme using ResourceManager.Theme =None, ResourceManager.ThemePath. (i just copied the ext-theme-gray folder from SVN to the application folder and set the ResourceManager.ThemePath = "<applicationpath>/ext-theme-gray-all.css")

by doing this now i can see that grey theme is applied to my application without setting the theme property. but the problem i m facing is i am not able to see check boxes in checkbox colunm or Images for Imagecommand and also cell are not also wrapping the contents.

i've also put the images folder in "resources\css" folder.

please refer the attached images.

1. Default.png is the image for default view.
2. Grey.png is the image for theme set using resourcemanager.themepath.

75047505

Daniil
Jan 20, 2014, 4:13 AM
You should also attach the Ext.NET CSS resources:

trunk\Ext.Net\Build\Ext.Net\extnet\resources

If you don't want to change Ext.NET images you can just attach "extnet-all-embedded.css".

<link type="text/css" rel="stylesheet" href="resources/css/extnet-all-embedded.css" />

hemantpatil
Jan 20, 2014, 7:13 AM
You should also attach the Ext.NET CSS resources:

trunk\Ext.Net\Build\Ext.Net\extnet\resources

If you don't want to change Ext.NET images you can just attach "extnet-all-embedded.css".

<link type="text/css" rel="stylesheet" href="resources/css/extnet-all-embedded.css" />

Hi Daniil,

that did the trick for me. thanks for your suggestion.

another thing i want to ask is, can i include/import/link this .css file in web.config, and it'll be referred by all the pages, and i do not need to edit all of my web pages to link the css.

Daniil
Jan 20, 2014, 7:24 AM
Yes, it is possible to set up via Web.config.

<extnet themePath=".../my-theme.css" />

Though, you will need to combine all the required styles in a single CSS file.

hemantpatil
Jan 20, 2014, 8:12 AM
Yes, it is possible to set up via Web.config.

<extnet themePath=".../my-theme.css" />

Though, you will need to combine all the required styles in a single CSS file.

Thanks Daniil,

that worked for me. you can now close the thread.

hemantpatil
Jan 21, 2014, 6:43 AM
Thanks Daniil,

that worked for me. you can now close the thread.

Hi Daniil,

after merging extnet-all-embedded.css to my css, now i m able to see the images in the image command column, but for checkbox column i can not see the checkbox (checked/unchecked) image.

is there any other css files need to be merged...?

Daniil
Jan 21, 2014, 11:05 AM
Sorry, you cannot use the "-embedded" version.

Please use "extnet-all.css" or "extnet-all-debug.css". You will need to move the images folder to your project as well.

trunk\Ext.Net\Build\Ext.Net\extnet\resources\image s\*.*

hemantpatil
Jan 22, 2014, 4:58 AM
Sorry, you cannot use the "-embedded" version.

Please use "extnet-all.css" or "extnet-all-debug.css". You will need to move the images folder to your project as well.


i didn't understood the term, You will need to move the images folder to your project as well trunk. \Ext.Net\Build\Ext.Net\extnet\resources\image s\*.*.

where do i need to copy the image folder..?

to the root directory of the web application or somewhere else. can you please elaborate.

Daniil
Jan 22, 2014, 8:09 AM
The "images" folder should be on the level up from the extnet-all-debug.css file.

For examples:

"resources" folder:

"css" folder:


extnet-all-debug.css


"images" folder:


all the images

hemantpatil
Jan 22, 2014, 9:19 AM
The "images" folder should be on the level up from the extnet-all-debug.css file.

For examples:

"resources" folder:

"css" folder:


extnet-all-debug.css


"images" folder:


all the images


Thanks Daniil,

that did the trick from me.

hemantpatil
Jan 31, 2014, 9:07 AM
The "images" folder should be on the level up from the extnet-all-debug.css file.

For examples:

"resources" folder:

"css" folder:


extnet-all-debug.css


"images" folder:


all the images


Hi Daniil,

now the problem i m facing is, elbow images for treeview are not showing for my custom theme.

i tried to copy the tree folder in image folder at root of the .css file and images folder at the root of resources folder also. (as per folder structure suggestion give by you in above post)

Please see attached images for your referance. (green_theme is my custom theme)

75467547

Daniil
Jan 31, 2014, 11:48 AM
Please post a sample to get the same TreePanel which is on the screenshot with the custom theme. Just a TreePanel, without custom theme. Just it looks correct. Probably, there is the RootVisible="true" setting, so, no indentation for the first level nodes. The "reports" node is probably empty. So, I don't quite understand why you expect the indentation there.

hemantpatil
Feb 03, 2014, 4:33 AM
Please post a sample to get the same TreePanel which is on the screenshot with the custom theme. Just a TreePanel, without custom theme. Just it looks correct. Probably, there is the RootVisible="true" setting, so, no indentation for the first level nodes. The "reports" node is probably empty. So, I don't quite understand why you expect the indentation there.

Hi Daniil,

Below is the sample code for Treepanel with greenTheme.



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TreePanel.aspx.vb" Inherits=".TreePanel" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Multi Node TreePanel built from code-behind - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Multi Node TreePanel built using markup</h1>

<ext:TreePanel
ID="TreePanel1"
runat="server"
Width="300"
Height="450"
Icon="BookOpen"
Title="Catalog"
AutoScroll="true">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:Node Text="Composers" Expanded="true">
<Children>
<ext:Node Text="Beethoven" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Six String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Three String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Grosse Fugue for String Quartets" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Sonata in A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="sonata in F Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - E-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 6 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 7 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 8 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 9 - D Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Brahms" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Violin Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Double Concerto - A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 1 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Piano Quartet No. 1 - G Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 2 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Two Sonatas for Clarinet - F Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - E Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Mozart" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Piano Concerto No. 12" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 17" Icon="Music" Leaf="true" />
<ext:Node Text="Clarinet Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 5" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 4" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
</BottomBar>
<Listeners>
<ItemClick
Handler="#{StatusBar1}.setStatus({text: 'Node Selected: <b>' + record.data.text + '<br />', clear: false});"
/>
<ItemExpand
Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + item.data.text + '<br />', clear: false});"
Buffer="30"
/>
<ItemCollapse
Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + item.data.text + '<br />', clear: false});"
Buffer="30"
/>
</Listeners>
</ext:TreePanel>
</form>
</body>
</html>


Also please find below my theme folder (css+images).
http://www.4shared.com/rar/bHTn4iQmba/ext-theme-green.html

Daniil
Feb 03, 2014, 7:14 AM
Ok, I attached the custom theme to the example

<ext:ResourceManager runat="server" ThemePath="ext-theme-green/css/ext-theme-green-all.css" />
and launched it.

It is what I see. It looks correct.
7552

Daniil
Feb 03, 2014, 7:17 AM
Ok, reproduced with v2.2.

I think I know the problem. Probably, you took all the sources from here:
http://svn.ext.net/premium/trunk/

But you should take it from here since you are using v2.2.
http://svn.ext.net/premium/tags/2.2.0/

hemantpatil
Feb 03, 2014, 8:55 AM
Ok, reproduced with v2.2.

I think I know the problem. Probably, you took all the sources from here:
http://svn.ext.net/premium/trunk/

But you should take it from here since you are using v2.2.
http://svn.ext.net/premium/tags/2.2.0/

Hi Daniil,

Thanks for the reply..

but i am not able to access my SVN account as it is expired on 2013-12-29. can you suggest any way around for this.

geoffrey.mcgill
Feb 03, 2014, 2:47 PM
Hi Daniil,

Thanks for the reply..

but i am not able to access my SVN account as it is expired on 2013-12-29. can you suggest any way around for this.

Hello,

Your Ext.NET Premium Support subscription can be renewed using the links provided in the renewal email(s), or please feel free to send an email to support@object.net and we'll send back new links.

Hope this helps.