HTC基礎知識

HTC是HTML Component的縮寫，是IE5及後續版本瀏覽器所支持的客戶端組件。據我我的理解，HTC就是一組以DHTML爲基礎封裝了客戶端行爲的腳本，每HTC以*.htc的文件存儲，一個HTC是一個客戶端「類」。  
對象 
     document                                在給定的瀏覽器窗口中表現HTML文檔。 
     element                          返回一份主文檔中鏈接行爲的標籤的參考。 
     PUBLIC:ATTACH                    綁定一個函數到一個事件上，所以每次事件發生在特殊對象上時函數會被調用。 
     PUBLIC:COMPONENT   以HTC指明文件的內容。 
     PUBLIC:DEFAULTS       設定一份HTC的默認屬性。 
     PUBLIC:EVENT             定義一個HTC的事件，使之暴露於包含該HTC的文檔。 
     PUBLIC:METHOD        定義一個HTC的方法，使之暴露於包含該HTC的文檔。 
     PUBLIC:PROPERTY              定義一個HTC的屬性，使之暴露於包含該HTC的文檔。  
方法 
     createEventObject 
     建立一個事件對象，當須要傳遞事件附加信息給PUBLIC:EVENT元素的fire方法時使用。 
事件 
     oncontentready 
     鏈接了行爲的元素的內容徹底被解析時發生。 
     oncontentsave 
     鏈接了一份元素行爲的一個元素的內容被保存或複製前發生。 
     ondetach 
     從一個元素解除一份行爲的鏈接前發生。 
     ondocumentready 
     當包含行爲的文檔徹底被解析時發生。 

示例

複製代碼代碼以下:

<PUBLIC:COMPONENT> 
<PUBLIC:PROPERTY NAME="grid"/><!--返回當前的Grid，經過該屬性，能夠訪問當前Grid的相關信息--> 

<!--和.Net中的DataColumn的定義相似--> 
<PUBLIC:PROPERTY NAME="columnName"/> <!--列名--> 
<PUBLIC:PROPERTY NAME="dataType"/><!--數據類型，如System.String，和SmartGridColumn上的DataType的值保持一致--> 
<PUBLIC:PROPERTY NAME="allowNull"/><!--是否容許爲空--> 
<PUBLIC:PROPERTY NAME="scale"/> 
<PUBLIC:PROPERTY NAME="precision"/><!--精度，主要用於數字型--> 
<PUBLIC:PROPERTY NAME="maxLength"/><!--最大長度，主要用於文本--> 
<PUBLIC:PROPERTY NAME="extendedProperties"/><!--通常用xml串，由於在存儲不少信息時，解析很是方便--> 

<PUBLIC:METHOD NAME="select"/><!--全選。因爲參照編輯框由INPUT、IMG組成，因此須要改寫（重載）select方法--> 
<PUBLIC:METHOD NAME="focus"><!--置焦點。因爲參照編輯框由INPUT、IMG組成，因此須要改寫（重載）focus方法--> 
<PUBLIC:PROPERTY NAME="input"  GET="getInput"/> 
<PUBLIC:PROPERTY NAME="value"  GET="getValue" PUT="setValue"/> 
<PUBLIC:METHOD NAME="cellDataCheck"/> 
</PUBLIC:COMPONENT> 
<script language="javascript">     
    var id = null; 

    //參照通常有兩個值，一個是顯示的Text，一個是id。idColumn指明id的Grid列 
    var idColumn = null; 

    var refUrl = null; 
    var refIdColumn = null; 
    var refNameColumn = null; 

    var extendedProp = element.extendedProperties; 
    if(extendedProp!= null && typeof(extendedProp) != "undefined") 
    { 
        var dom = new ActiveXObject("MSXML.DOMDocument"); 
        dom.loadXML(extendedProp); 

        idColumn = dom.documentElement.getAttribute("idColumn"); 

        var refInfo = dom.documentElement.firstChild; 
        refIdColumn = refInfo.getAttribute("idColumn"); 
        refNameColumn = refInfo.getAttribute("nameColumn"); 
        refUrl = refInfo.getAttribute("url"); 
    } 

    var btn = element.getElementsByTagName("IMG")[0];     
    btn.onclick = btnClick; 
    function btnClick() 
    { 
        var ret = window.showModalDialog(refUrl,self,'scrolling:no;resizable:no;status:no;dialogWidth:550px;dialogHeight:450px;center:1'); 

        if(ret != null) 
        { 
            var el = ret.documentElement.firstChild; 
            if(el != null) 
            { 
                input.value = el.getAttribute(refNameColumn); 

                if(idColumn != null && idColumn!="") 
                { 
                    id = el.getAttribute(refIdColumn); 
                    grid.setCellValue(grid.row,idColumn,id); 
                }             
            } 
        } 

        //-------------------------------------------------------------- 
        grid.setCellValue(grid.row,"num",100); //賦值示例 
        grid.setCellValue(grid.row,"price",10); //賦值示例 
        //------------------------------------------------------------- 
    } 

    var statusText = "";     
    var input =    element.getElementsByTagName("INPUT")[0]; 
    input.onblur = inputOnBlur; 

    function inputOnBlur() 
    { 
        grid.status = statusText; //能夠經過grid.status來修改Grid狀態條的狀態。 
    } 

    function getInput() 
    { 
        return input; 
    }     

    //該方法由SmartGrid在顯示編輯器時調用。因爲參照編輯器由INPUT、IMG等元素組成，因此須要告知SmartGrid在設置編輯器焦點時，應該讓哪一個元素得到焦點！ 
    function focus() 
    {     
        input.focus();     
    } 

    //該方法由SmartGrid在對編輯器全選時調用。因爲參照編輯器由INPUT、IMG等元素組成，因此須要告知SmartGrid在全選編輯器的內容時，應該怎樣進行全選！ 
    function select() 
    { 
        input.select(); 
    } 

    function setValue(val) 
    { 
        input.value = val; 

        if(idColumn != null) 
        { 
            var r = grid.row; 
            id = grid.getCellValue(r,idColumn); 
        } 
    } 

    function getValue() 
    { 

        return input.value ; 
    } 

    function cellDataCheck(args) 
    { 
        return ;     
    } 

</script>