HTC基礎(chǔ)知識

字號:


    HTC是HTML Component的縮寫,是IE5及后續(xù)版本瀏覽器所支持的客戶端組件。據(jù)我個人理解,HTC就是一組以DHTML為基礎(chǔ)封裝了客戶端行為的腳本,每HTC以*.htc的文件存儲,一個HTC是一個客戶端“類”。
    對象
    document 在給定的瀏覽器窗口中表現(xiàn)HTML文檔。
    element 返回一份主文檔中連接行為的標(biāo)簽的參考。
    PUBLIC:ATTACH 綁定一個函數(shù)到一個事件上,因此每次事件發(fā)生在特殊對象上時函數(shù)會被調(diào)用。
    PUBLIC:COMPONENT 以HTC指明文件的內(nèi)容。
    PUBLIC:DEFAULTS 設(shè)定一份HTC的默認(rèn)屬性。
    PUBLIC:EVENT 定義一個HTC的事件,使之暴露于包含該HTC的文檔。
    PUBLIC:METHOD 定義一個HTC的方法,使之暴露于包含該HTC的文檔。
    PUBLIC:PROPERTY 定義一個HTC的屬性,使之暴露于包含該HTC的文檔。
    方法
    createEventObject
    創(chuàng)建一個事件對象,當(dāng)需要傳遞事件附加信息給PUBLIC:EVENT元素的fire方法時使用。
    事件
    oncontentready
    連接了行為的元素的內(nèi)容完全被解析時發(fā)生。
    oncontentsave
    連接了一份元素行為的一個元素的內(nèi)容被保存或復(fù)制前發(fā)生。
    ondetach
    從一個元素解除一份行為的連接前發(fā)生。
    ondocumentready
    當(dāng)包含行為的文檔完全被解析時發(fā)生。
    示例復(fù)制代碼 代碼如下:
    <PUBLIC:COMPONENT>
    <PUBLIC:PROPERTY NAME="grid"/><!--返回當(dāng)前的Grid,通過該屬性,可以訪問當(dāng)前Grid的相關(guān)信息-->
    <!--和.Net中的DataColumn的定義類似-->
    <PUBLIC:PROPERTY NAME="columnName"/> <!--列名-->
    <PUBLIC:PROPERTY NAME="dataType"/><!--數(shù)據(jù)類型,如System.String,和SmartGridColumn上的DataType的值保持一致-->
    <PUBLIC:PROPERTY NAME="allowNull"/><!--是否允許為空-->
    <PUBLIC:PROPERTY NAME="scale"/>
    <PUBLIC:PROPERTY NAME="precision"/><!--精度,主要用于數(shù)字型-->
    <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狀態(tài)條的狀態(tài)。
    }
    function getInput()
    {
    return input;
    }
    //該方法由SmartGrid在顯示編輯器時調(diào)用。由于參照編輯器由INPUT、IMG等元素組成,所以需要告知SmartGrid在設(shè)置編輯器焦點時,應(yīng)該讓哪個元素獲得焦點!
    function focus()
    {
    input.focus();
    }
    //該方法由SmartGrid在對編輯器全選時調(diào)用。由于參照編輯器由INPUT、IMG等元素組成,所以需要告知SmartGrid在全選編輯器的內(nèi)容時,應(yīng)該怎樣進(jìn)行全選!
    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>