深入解析 ComponentArt ComboBox 控件結構與實現原理

ComponentArt 控件套件功能強大且易於使用，近期專案需要用到該套件，因此決定深入學習其內部實現機制。本文將從 ComboBox 控件切入，逐步剖析其結構與生成的 HTML 代碼，幫助開發者更透徹地理解這款商業級控件的運作方式。

一、ComboBox 控件效果展示

首先看看 ComboBox 的實際運行效果：

圖一：ComboBox 控件顯示效果

二、ComboBox 與 DropDownList 的差異

與標準 DropDownList 不同，ComboBox 允許使用者自行輸入文字。由於 HTML 原生標籤不提供此類複合控件，ComponentArt 必須利用現有標籤（如 input、table、div、img 等）進行模擬組合。

三、生成的 HTML 結構分析

控件在瀏覽器端渲染為兩大部分：輸入區與下拉面板。以下為簡化後的局部 HTML 代碼：

<table id="ComboBox2" class="comboBox" cellpadding="0" cellspacing="0" 
  onmouseout="ComboBox2.HandleInputMouseOut()" 
  onmouseover="ComboBox2.HandleInputMouseOver()" 
  style="display:inline-block;width:200px;">
  <tr>
    <td width="100%" id="ComboBox2_TextBox">
      <input id="ComboBox2_Input" name="ComboBox2_Input" autocomplete="off" 
        onsubmit="return false;" type="text" class="comboTextBox" 
        onfocus="ComboBox2.HandleFocus()" 
        onblur="ComboBox2.HandleBlur(event)" 
        onkeydown="ComboBox2.HandleKeyPress(event,this)" 
        style="display:none;" />
    </td>
    <td>
      <img onmouseup="ComboBox2.HandleDropMouseUp(event,this)" 
        onmousedown="ComboBox2.HandleDropClick(event,this)" 
        src="images/drop.gif" id="ComboBox2_DropImage" 
        style="display:block;" />
    </td>
  </tr>
</table>
<div class="comboDropDown" id="ComboBox2_DropDown" style="display:none;">
  <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
      <td>
        <div id="ComboBox2_DropDownContent" 
          onscroll="ComboBox2.HandleScroll(event,this)" 
          onmousedown="ComponentArt_CancelEvent(event)" 
          onmouseup="ComboBox2.HandleMouseUp(event,this)">
        </div>
      </td>
    </tr>
  </table>
</div>

四、核心結構說明

• 外層 Table：作為整體容器，包含輸入框與下拉按鈕兩個儲存格。
• 輸入框：一個 type="text" 的 input 元素，綁定焦點、失焦、鍵盤等事件，初始隱藏（display:none），由客戶端腳本動態控制顯示。
• 下拉按鈕：一張圖片，綁定滑鼠按下/釋放事件，觸發下拉面板的展開/收合。
• 下拉面板：一個隱藏的 div，內部包含一個可滾動的內容區，承載選項列表。

五、事件處理機制

所有互動行為（如 HandleFocus、HandleBlur、HandleKeyPress、HandleDropClick 等）均委託給以控件 ID 為前綴的 JavaScript 物件（如 ComboBox2），實現封裝與多實例共存。

六、總結

ComponentArt ComboBox 通過 Table + Input + Image + Div 的組合，模擬出功能豐富的下拉輸入框。其客戶端物件模型清晰，事件綁定規範，適合進一步擴展與客製化。後續文章將繼續深入探討其資料綁定、模板與樣式控制等進階主題。