【转】近期Coolite控件的技术点总结

1。Coolite下如何自定义控件样式表

 1<style type="text/css">
 2        .x-grid3-td-fullName .x-grid3-cell-inner {}{
 3            font-family:tahoma, verdana;
 4            display:block;
 5            font-weight:normal;
 6            font-style: normal;
 7            color:#385F95;
 8            white-space:normal;
 9        }
10        
11        .x-grid3-row-body p {}{
12            margin:5px 5px 10px 5px !important;      
13            width:99%;
14         color:Gray;      
15        }
16
17    </style>
18
19            <View>
20                <ext:GridView ID="GridView1" runat="server" EnableRowBody="true">
21                    <GetRowClass Handler="rowParams.body = '<p>' + record.data.Notes + '</p>'; return 'x-grid3-row-expanded';" />                    
22                </ext:GridView>        
23            </View>    

Coolite和EXT的自定义CSS方法就是这样， 按照标准名字定义样式就行了
如.x-grid3-summary-row， 自动识别，如果还不明白，可以下载个ExtJS，进入到ext.css里面就能看到所有CSS的名字




2.
      (1)Coolite控件语言包问题，如Grid，和日期类型控件，汉化的方法

<asp:ScriptManager ID="ScriptManager2" runat="server">
        <Scripts>
           <asp:ScriptReference Path="ext-lang-zh_CN.js" />
      </Scripts>
 </asp:ScriptManager> 

      (2)ScriptManager问题,如果一个页面内同时出现两个ScriptManager就会报错（导致一个页面不能做多个管理模块），如果实现让“模块”运行时，检查当前页面，是否其他模块已经存在ScriptManager,存在就不注册新的

Coolite.Ext.Web.ScriptManager scmanager = Coolite.Ext.Web.ScriptManager.GetCurrent(this.Page);
if (scmanager == null)
{
   scmanager = new Coolite.Ext.Web.ScriptManager();
   this.Controls.Add(scmanager);
}

    (3)针对上面两个问题，我们在DNN在使用Coolite，并且调用汉化包，要这样使用

              if (!Page.IsPostBack)
                {

                    Coolite.Ext.Web.ScriptManager scmanager = Coolite.Ext.Web.ScriptManager.GetCurrent(this.Page);
                    if (scmanager == null)
                    {
                        scmanager = new Coolite.Ext.Web.ScriptManager();
                        this.Controls.Add(scmanager);
                    }

                    if (DotNetNuke.Framework.AJAX.IsInstalled())
                    {
                        DotNetNuke.Framework.AJAX.RegisterScriptManager();
                        System.Web.UI.ScriptManager objScriptManager = System.Web.UI.ScriptManager.GetCurrent(this.Page);
                        if (objScriptManager != null)
                        {
                            ScriptReference scr = new ScriptReference("~/js/ext-lang-zh_CN.js");
                            objScriptManager.Scripts.Add(scr);
                        }
                    }

3.Coolite和<%=this.ClientID %>

我们建立一个普通的ASP.NET网站，编写如下代码

HTML:

<ext:GridPanel 
     runat="server" 
     ID="GridPanel1" 
     .

JS:

function MSG()
{
    alert(GridPanel1);
}

这样是实现的， 但是同样把类似代码移到DotNetNuke下去实现

 

<ext:GridPanel 
    runat="server" 
    ID="DocmentGridPanel" 
    Title="公文管理" 
    StoreID="StoreDocumentType" 
    Height="500" Header="false">
   。。。。。。。。。

JS:
 function MSG()
{
    alert(DocmentGridPanel);
}

这样确实出错的，找不到对象DocumentGridPanel...

 

如何解决这个问题呢？

我观察两种代码生成的客户端代码

 

普通网站项目，查看页面代码
<input name="GridPanel1_SM" type="hidden" id="GridPanel1_SM" />

DNN外面有个dnn_ctr1486_DocumentType代表这个模块框
<input name="dnn$ctr1486$DocumentType$DocmentGridPanel_SM" type="hidden" id="dnn_ctr1486_DocumentType_DocmentGridPanel_SM" />

就有点明白了，DNN所有控件的外层包裹一个"容器".

我们用如下方法

<%=this.ClientID %>_DocmentGridPanel

就可以实现了

alert(<%=this.ClientID %>_DocmentGridPanel);

4.为你要删除的记录增加删除验证(Coolite)　

<script type="text/javascript">  
function DelSelectedRows()
{
    Ext.MessageBox.confirm('提示', '是否要删除这些记录',function(btn)
    {
        if (btn == "yes") 
        {
            Coolite.AjaxMethods.DeleteSelectedWorkFlow();
        }
    });
}
function DelSelected(selectedID)
{
    Ext.MessageBox.confirm('提示', '是否要删除此记录',function(btn)
    {
        if (btn == "yes") 
        {
            Coolite.AjaxMethods.DeleteWorkFlow(selectedID);
        }
    });
}
</script>

 

<ext:Button ID="btnDelete" runat="server"  Text="删除选中" Icon="Delete">
        <Listeners>
            <Click Fn="DelSelectedRows" />
        </Listeners>
        </ext:Button>

GridPanel中。。
<Listeners>
<Command Handler="if (command=='Edit'){Coolite.AjaxMethods.EditWorkFlow(record.data.WFWorkFlowID);}else if(command='Delete'){DelSelected(record.data.WFWorkFlowID);}" />
</Listeners>    
<SelectionModel>
     <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel> 

5.Coolite的Combobox的setValue和setRawValue
Coolite的Javascript代码中的
Combobox的setValue(record.data['DesktopModuleID']);
将会使SelectedItem的Text和Value都变成
record.data['DesktopModuleID']
所以调用之后应该调用次
Combobox的setRawValue(record.data['FriendlyName']);
会改变Text的值为想显示的，SetRawValue一定要在SetValue之后调用
如以下代码

var selectDesktopModule = function (selectionModel , rowIndex, record) {
        <%= DesktopModuleWindow.ClientID %>.hide(null);
        hidCtrl.setValue(record.data['DesktopModuleID']);
        hidCtrl.setRawValue(record.data['FriendlyName']);
        hidCtrl.triggers[0].show();
    }

6.关于Coolite的AjaxMetod在MasterPage或者CMS系统下使用问题
      在UserControl(ascx)，MasterPage或者Page(aspx)中使用Coolite的AjaxMetod讲究是不同的

在MasterPage中或者你在类似DotNetNuke的系统中调用AjaxMetod标志的方法，默认情况下是会找不到方法的，

处理此类问题需要使用AjaxMethodProxyID,使用的方法是在类的前面加上，如下

[AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.None)]
partial class ModuleRightManager : PortalModuleBase

我们先看一下几种AjaxMethodProxyID 的区别

1. None -  命名前缀是空的，调用方法时直接使用 Coolite.AjaxMethods.ajaxMethod(...)
2. ClientID - 命名前缀需要加上当前类控件的client id(客户端前缀)

           如Coolite.AjaxMethods.ctl00_UC1.ajaxMethod

           当然通常情况下我们Coolite.AjaxMethods.<%=this.ClientID>.ajaxMethod(...)
3. ID - 使用当前控件ID作为前缀, Coolite.AjaxMethods.UC1.ajaxMethod(...)
4. Alias - 使用别名做前缀，你可以声明自己的一个别名, Coolite.AjaxMethods.myAlias.ajaxMethod(...)
5. AliasPlusID - 别名和ID同时使用,如 Coolite.AjaxMethods.myAliasUC1.ajaxMethod(...)

在有MasterPage页面或者在类似DotNetNuke的CMS系统下使用Coolite的AJAXMethod,建议你在页面的前部加上

    [AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.ClientID)]
    public partial class PopupCustomerDetail : PortalModuleBase