扩展AJAXControlToolkit中的控件

需求：

TabContainer容器中的TabPanel类本身就包含了Enabled属性，也可以使用Javascript方法 set_enabled(X)来设置Enabled属性，如果某个TabPanel的这个属性为false的话，这个TabPanel就不会显 示在TabContainer中，这与一般控件的“Enabled”属性不太一样，我认为叫它“Visiable”会更加恰当 。如下图所示：

有时候这并不符合我们的需求，所以，在本例中，我们将为其添加Disabled功能，使TabPanel控件可 以变成灰色，而不响应客户端事件。

1. 添加服务端属性：

首先我们找到TabPanel.cs也就是TabPanel类，在其中添加如下属性来代表TabPanel是“恢复启用”还 是“变灰禁用”状态：

　　　　　　　　[DefaultValue("")]
　　　　　　　　[Category("Behavior")]
　　　　　　　　[ExtenderControlProperty]
　　　　　　　　[ClientPropertyName("disabled")]
　　　　　　　　public　bool　Disabled　
　　　　　　　　{
　　　　　　　　　　　　get　{　return　(bool)(ViewState["Disabled"]　??　false);　}
　　　　　　　　　　　　set　{　ViewState["Disabled"]　=　value;　}
　　　　　　　　}

　　　　　　　　internal　bool　Active
　　　　　　　　{
　　　　　　　　　　　　get　{　return　_active;　}
　　　　　　　　　　　　set　{　_active　=　value;　}
　　　　　　　　}

在属性中，我们设置ClientPropertyName为“disabled”,也就是将这个属性映射到Javascript Behavior代码中的_disabled属性，并以ViewState为状态保存容器。

时间:2011-10-18 cnblogs LanceZhang

2. 添加客户端属性

由于AJAX Control Toolkit中的控件行为大都是由Javascript Behavior实现的，接下来，我们向Tab 控件相应的Javascript Behavior中添加客户端属性。

找到AjaxControlToolkit.TabPanel 的定义，添加上面提到的_disabled成员变量，如下：

AjaxControlToolkit.TabPanel　=　function(element)　{
　　　　AjaxControlToolkit.TabPanel.initializeBase(this,　[element]);
　　　　this._active　=　false;
　　　　this._tab　=　null;
　　　　this._headerOuter　=　null;
　　　　this._headerInner　=　null;
　　　　this._header　=　null;
　　　　this._owner　=　null;
　　　　this._enabled　=　true;
　　　　this._disabled　=　false;　//test　add
　　　　this._tabIndex　=　-1;
　　　　this._dynamicContextKey　=　null;
　　　　this._dynamicServicePath　=　null;
　　　　this._dynamicServiceMethod　=　null;
　　　　this._dynamicPopulateBehavior　=　null;
　　　　this._scrollBars　=　AjaxControlToolkit.ScrollBars.None;
　　　　this._header_onclick$delegate　=　Function.createDelegate(this,　 this._header_onclick);
　　　　this._header_onmouseover$delegate　=　Function.createDelegate(this,　 this._header_onmouseover);
　　　　this._header_onmouseout$delegate　=　Function.createDelegate(this,　 this._header_onmouseout);
　　　　this._header_onmousedown$delegate　=　Function.createDelegate(this,　 this._header_onmousedown);
　　　　this._dynamicPopulate_onpopulated$delegate　=　Function.createDelegate(this,　 this._dynamicPopulate_onpopulated);
　　　　this._oncancel$delegate　=　Function.createDelegate(this,　this._oncancel);
}

接下来，我们还需要在AjaxControlToolkit.TabPanel.prototype 中添加_disabled属性的访问器：

　　　　get_disabled:　function()　{
　　　　　　　　return　this._disabled;
　　　　},

　　　　set_disabled:　function(value)　{
　　　　　　　　if　(value　!=　this._disabled)　{
　　　　　　　　　　　　this._disabled　=　value;

　　　　　　　　　　　　if　(this.get_isInitialized())　{
　　　　　　　　　　　　　　　　if　(!this._disabled)　{
　　　　　　　　　　　　　　　　　　　　this._regular();
　　　　　　　　　　　　　　　　}　else　{
　　　　　　　　　　　　　　　　　　　　this._grayout();
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　　　this.raisePropertyChanged("disabled");
　　　　　　　　}
　　　　},

有了get和set访问器，我们就可以在客户端使用

$find('<%=Tabs.ClientID%>').get_tabs()[2].set_disabled(true);

来设置该属性

时间:2011-10-18 cnblogs LanceZhang

3. 添加客户端行为

有了属性，我们接下来定义属性所代表的行为，在这里，我们使用_regular()和_grayout()两个方法 来进行TabPanel的“恢复启用”和“变灰禁用”的状态设置：

　　　　_regular:　function()　{
　　　　　　　　this._tab.disabled　=　false;
　　　　},

　　　　_grayout:　function()　{
　　　　　　　　this._tab.disabled　=　true;
　　　　　　　　this.get_headerTab().disabled　=　true;
　　　　　　　　if　(this._get_active())　{

　　　　　　　　　　　　var　next　=　this._owner.getNearestTab(false);
　　　　　　　　　　　　if　(!!next)　{
　　　　　　　　　　　　　　　　this._owner.set_activeTab(next);
　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　this._deactivate();
　　　　}

这两个方法由上面代码中高亮的部分调用。

4. 编译测试

修改工作完成后，我们重新编译AjaxControlToolkit.dll，并覆盖项目中原有的引用，即可在网站中 使用扩展后的控件：

<%@　Page　Language="C#"　%>

效果如下图所示，TabPanel被真正的Disable了：

全部代码请访问如下链接获取：http://forums.asp.net/p/1388315/2964536.aspx#2964536