Coolite 0.8/Ext.net1.0更换主题

在Coolite控件中(0.8名为Coolite，1.0更名为Ext.net1.0）要更换皮肤的方法。

 

Ext.net 1.0的处理方案：

我在Client端使用一个ComboBox放置可供选择的主题方案，代码如下：

<ext:ComboBox runat="Server" Editable="false" ID="comBoxThemes" SelectedIndex="0"> <Items> <ext:ListItem Text="Blue Theme (Default)" Value="default" /> <ext:ListItem Text="Gray Theme" Value="gray" /> <ext:ListItem Text="Accessibility Theme" Value="access" /> <ext:ListItem Text="Slate Theme" Value="slate" /> </Items> <Listeners> <Select Handler="var val = comBoxThemes.getValue();Ext.net.ResourceMgr.setTheme('/extjs/resources/css/xtheme-' +val + '-embedded-css/ext.axd'); CenterPanel.items.each(function (el) {if (!Ext.isEmpty(el.iframe)) {el.iframe.dom.contentWindow.Ext.net.ResourceMgr.setTheme('/extjs/resources/css/xtheme-' + val + '-embedded-css/ext.axd');Ext.net.DirectMethods.setTheme(val);}});" /> </Listeners> </ext:ComboBox>

 

说明：Ext.net.ResourceMgr.setTheme('/extjs/resources/css/xtheme-' +val + '-embedded-css/ext.axd');

是更换当前面的主题，

CenterPanel.items.each(function (el) {if (!Ext.isEmpty(el.iframe)) {el.iframe.dom.contentWindow.Ext.net.ResourceMgr.setTheme('/extjs/resources/css/xtheme-' + val + '-embedded-css/ext.axd');

遍历是否有IFrame页面，有则替换。

Ext.net.DirectMethods.setTheme(val);

执行服务端方法，指定现在选择的主题方案。

 

SetTheme方法：

[DirectMethod] public void setTheme(string val) { Ext.Net.Theme theme = new Ext.Net.Theme(); switch(val) { case "default": theme = Ext.Net.Theme.Default; break; case "gray": theme = Ext.Net.Theme.Gray; break; case "access": theme = Ext.Net.Theme.Access; break; case "slate": theme = Ext.Net.Theme.Slate; break; } SetExtTheme(theme); }  

 

在服务端，我的Theme方案是保存在Session中的，通过页面基类中的SetExtTheme(Ext.net theme){....}方法来指定。

页面基类PageBase.cs中关于主题的代码如下：

public const string ResourceManagerId = "ExtResourceManager"; private void AddResourceManagerToPage() { if (Session[ResourceManagerId] == null) { Session[ResourceManagerId] = Ext.Net.Theme.Default; } ResourceManager manager = (ResourceManager)this.FindControl(ResourceManagerId); if (manager != null) { manager.Theme = (Ext.Net.Theme)Session[ResourceManagerId]; } } protected void SetExtTheme(Ext.Net.Theme theme) { Session[ResourceManagerId] = theme; } protected override void OnPreLoad(EventArgs e) { base.OnPreLoad(e); AddResourceManagerToPage(); }

 

Coolite 0.8的处理方案与1.0的基本一至，只是Client的JS方法有所区别，见代码：

 

<ext:ComboBox runat="Server" Editable="false" ID="comBoxThemes" SelectedIndex="0"> <Items> <ext:ListItem Text="Blue Theme (Default)" Value="default" /> <ext:ListItem Text="Gray Theme" Value="gray" /> <ext:ListItem Text="Accessibility Theme" Value="access" /> <ext:ListItem Text="Slate Theme" Value="slate" /> </Items> <Listeners> <Select Handler="Coolite.Ext.setTheme('/extjs/resources/css/ext-all-embedded-css/coolite.axd'); CenterPanel.items.each(function (el) {if (!Ext.isEmpty(el.iframe)) {el.iframe.dom.contentWindow.Coolite.Ext.setTheme('/extjs/resources/css/ext-all-embedded-css/coolite.axd');Coolite.AjaxMethods.SetTheme('Default');}});" /> </Listeners> </ext:ComboBox>