介紹： 主要總結了Panel操作，TabPanel操作，window彈出框，MultiCombo操作，多window取值問題，GridPanel如何實現分頁功能,js字符串與Ext對象轉換
去年底一篇總結《ext.net 開發學習—2011 結束迎接2012》。 記錄些日常開發所遇到的問題……。
人非聖賢， 寫出來的當然也難免會出現一些不妥的代碼，如有還請指教……
一、單擊激活指定Panel：pnlAttribute.expand() （TabPanel 激活子Panel：TabPanel .setActiveTab(Panel)）
<ext:Button Text="屬性" runat="server" Icon="ApplicationViewDetail">
<Listeners>
<Click Handler="if(hdFoldFid.getValue()==''){alert('請選擇相關文件或目錄');return;}; pnlAttribute.expand(); Ext.net.DirectMethods.AttributeClick(hdFoldFid.getValue()); "/>
</Listeners>
</ext:Button>
Panel 主鍵ID： pnlAttribute
效果：
二、TabPanel 子Panel 顯示、隱藏
eg：選擇文件夾->顯示Panel：常規，日志；選擇文件->顯示Panel：常規，版本，日志
<Click Handler="var row = gpFolderList.getSelectionModel().getSelections()[0]; hdFolderFid.setValue(row.get('FUID'));
hdFoldFid.setValue(row.get('FUID'));
Ext.net.DirectMethods.AttributeClick(hdFoldFid.getValue());
if(row.get('FileType')===null)
{
tpnlCenter.setActiveTab(pnlFoldAttribute);
#{tpnlCenter}.hideTabStripItem(0);
#{tpnlCenter}.hideTabStripItem(2);
#{tpnlCenter}.unhideTabStripItem(1);
}else
{
tpnlCenter.setActiveTab(pnlFileAttribute);
#{tpnlCenter}.hideTabStripItem(1);
#{tpnlCenter}.unhideTabStripItem(0);
#{tpnlCenter}.unhideTabStripItem(2);
}
" />
效果：
叄 指定頁面以彈出框window形式展現
例如這樣頁面：
要以window形式彈出
主頁：
前台代碼：
<ext:MenuItem ID="MenuItem2" runat="server" Text="添加角色">
<Listeners>
<Click Handler="winCharacter.show();"/>
</Listeners>
</ext:MenuItem>
后台代碼：
protected void Page_Load(object sender, EventArgs e)
{
CreateControl.CreateWindow("winCharacter", "角色選擇", "../CommonWindow/CharacterSelection.aspx").Render(this.Form);
}
CreateControl類
public static Window CreateWindow(string wId, string wTitle, string wUrl)
{
var win = new Window
{
ID = wId,
Title = wTitle,
Width = 530,
Height = 410,
Hidden = true,
X = 50,
Y = 130
};
win.AutoLoad.Url = wUrl;
win.AutoLoad.Mode = LoadMode.IFrame;
return win;
}
效果：
最終效果：
四、下拉框多選控件 MultiCombo： 后台代碼加載時如何顯示出已經選擇的項
官方：ID.SelectedItems.Add(new SelectedListItem(value));//ID ：MultiCombo 主鍵
其中new SelectedListItem參數可以是Index，Value 但是后台始終綁定不了，前台可以實現。
自己的解決方法： ID.SelectItem(index); //只能index，value同樣實現不了
代碼：
View Code
private void GetBusinessLogistic()
{
BusinessLogisticManager business = new BusinessLogisticManager();
DataTable dt = business.GetAll();
Ext.Net.ListItem item;
foreach (DataRow row in dt.Rows)
{
item = new Ext.Net.ListItem { Text = row["NC_LogisticsName"].ToString(), Value = row["BI_Seq"].ToString() };
mcobBusiness.Items.Add(item);
}
}
綁定已選項
View Code
for (int i = 0; i < dt.Rows.Count; i++)
{
for (int j = 0; j < businessList.Length; j++)
{
if (dt.Rows[i]["NC_LogisticsName"].ToString() == businessList[j])
{
mcobBusiness.SelectItem(i);
}
}
}
效果：
五、Panel頁面自動加載panel
<ext:Panel ID="Tabl2" runat="server" Title="郵件管理" Border="false" BodyBorder="false">
<AutoLoad Url="MailManage/Main.aspx" ShowMask="true" Mode="IFrame">
</AutoLoad>
</ext:Panel>
六、多Window取值賦值
效果:
B窗口：
<ext:Button ID="btnSubmit" runat="server" Text="確 定" Icon="Accept">
<Listeners>
<Click Handler="var num=Store2.getCount();var depts='';
if(num>0){
for(var i=0;i<num;i++){
var deptid=Store2.getAt(i).get('RoleCode');
var deptname=Store2.getAt(i).get('RoleName');
depts=depts+deptid+','+deptname+'|';
}
}
window.parent.SetRightToDataTable(depts,2);
parent.winCharacter.hide();" />
</Listeners>
</ext:Button>
Store2為“已選數據”的數據源Store，
SetRightToDataTable：A窗口中js函數，可以通過它處理數據加載到A窗口中
winCharacter：B窗口ID
七、ComboBox不可編輯狀態
代碼：
View Code
<ext:CompositeField runat="server" FieldLabel="管理員角色">
<Items>
<ext:ComboBox Editable="false" Disabled="true" EmptyText="請選擇管理員角色" StoreID="stRole" DisplayField="NC_RoleName"
ValueField="BI_Seq" ID="cmbRole" runat="server" Width="200">
<Triggers>
<ext:FieldTrigger Icon="Clear" Qtip="清除" />
</Triggers>
<Listeners>
<TriggerClick Handler="this.removeByValue(this.getValue());this.clearValue();" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:CompositeField>
核心代碼： Editable="false" Disabled="true"
效果：
.Net控件不可編輯狀態常用的屬性： Enabled="false" 在這里Ext.net中沒效果，
ReadOnly="true" 還有其他屬性則是缺胳膊少腿的
八、GridPanel 分頁實現
前端大致代碼：這里需注意：store下屬性Proxy不可少。官方解釋
“proxy:
Ext.data.DataProxy
Proxy對象，用於訪問數據對象。proxy The Proxy ob...
Proxy對象，用於訪問數據對象。proxy The Proxy object which provides access to a data object.
”通俗的講就是數據代理，另外分頁頁面需刷新所以別忘了“OnRefreshData“。另外GridPanel中要設置ext:PagingToolbar的storeId。
這邊GridPanel中Columns中我們后端數據生成的，如果你是前台寫死別忘了加上你需要的行。
<%--列表數據源--%> <ext:Store runat="server" ID="stMain" AutoLoad="true" OnRefreshData="StMain_Refresh"> <Reader> <ext:JsonReader IDProperty="ItemNo"> </ext:JsonReader> </Reader> <Proxy> <ext:PageProxy> </ext:PageProxy> </Proxy> </ext:Store> <ext:Panel ID="Panel9" runat="server" Layout="FitLayout" Frame="true"> <Items> <ext:GridPanel runat="server" ID="gpMain" StoreID="stMain" StripeRows="true" TrackMouseOver="true"> <ColumnModel ID="ColumnModel1" runat="server"> <Columns> <ext:RowNumbererColumn Locked="true" /> </Columns> </ColumnModel> <View> <ext:LockingGridView /> </View> <BottomBar> <ext:PagingToolbar ID="PgbListMain" runat="server" PageSize="50" StoreID="stMain"> <Items> <ext:Label ID="lblSearchTime" runat="server"></ext:Label> </Items> </ext:PagingToolbar> </BottomBar> <LoadMask ShowMask="true" /> </ext:GridPanel> </Items> </ext:Panel>
后端大致源碼
/// <summary> /// 數據列表刷新 /// </summary> protected void StMain_Refresh(object sender, StoreRefreshDataEventArgs e) { //主要核心源碼
………………
………………
int total = ……………………；//數據源總數 e.Total = total; SourceTable = …………；//數據源 _createPageManager.BindStoreColumn(stMain, FieldList, "1");//綁定主表數據源字段和主表控件字段 stMain.DataSource = SourceTable; stMain.DataBind(); }
九、設置TabPanel中當前激活Panel
設置ActiveIndex即可 示例1代表第二個激活：組織panel
<ext:TabPanel ID="TabPanel1" runat="server" Width="280" Frame="true" ActiveIndex="1"> <Items> <ext:Panel ID="plLeft" runat="server" Border="false" Title="查詢" AutoScroll="true"/> <ext:Panel ID="plRight" runat="server" Border="false" Title="組 織" AutoScroll="true"> </Items> </ext:TabPanel>
十、FieldSet寬度小問題
用FieldSet做分組功能，后台代碼實現。一個For循環生成FieldSet
可出來的效果有點瑕疵，第一個FieldSet寬度明顯比第二、三個要寬。可是一個方法生成的為什么會出現這個問題……昨天搞了小半天，下班了就沒管它，早上突然想到AutoWidth。一試 搞定
處理前頁面：
處理后
貼出后台生成源碼
for (int j = 0; j < pnlGroupList.Rows.Count; j++) { FieldSet fsGroup = new FieldSet { Title = pnlGroupList.Rows[j]["GroupName"].ToString(), Collapsible = true, Layout = "form", Padding = 3, AutoScroll = true, AutoWidth=true }; TableLayout tblField = new TableLayout { Columns = string.IsNullOrEmpty(structRow["RowColumnCount"].ToString()) ? 1 : Convert.ToInt32(structRow["RowColumnCount"].ToString()), }; DataRow[] showColumn = fieldList.Select( "SQLNo=1 AND IsShow=1 AND PnlFUID='" + structRow["FUID"] + "' AND GroupFUID='" + pnlGroupList.Rows[j]["FUID"] + "'", "ControlOrderNo"); foreach (DataRow row in showColumn) { Component item = CreateControl.GetControls(row, sourceRow[row["FieldAlias"].ToString()], true); Cell itemCell = new Cell(); itemCell.Items.Add(item); tblField.Cells.Add(itemCell); } fsGroup.Items.Add(tblField); pnlStruct.Items.Add(fsGroup); }
十一 、字符串與對象轉換
子窗口給父窗口控件賦值：parent.父窗口控件ID.setValue(value)。
但是如果你的控件ID是通過后台代碼組合而成，出來的控件ID可能就是一串字符串，此時要注意了：要使用parent.eval（）方法把相關字符串轉換成Ext對象。例如
control=“txtUserName”；
parent.eval(control).setValue(value);
越是小問題，越要仔細。
持續更新中……
作者：PEPE
出處：http://pepe.cnblogs.com/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。