[转载] Coolite 0.8/Ext.net1.0更换主题

 

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

分类： Coolite/Ext JS/Ext.NET2010-09-29 18:24 1117人阅读 评论(4) 收藏 举报

在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>