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>