ext.net 开发学习
介绍： 主要总结了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
绑定已选项
View Code
效果：
< ext:Panel ID ="Tabl2" runat ="server" Title ="邮件管理" Border ="false" BodyBorder ="false" >六、多Window取值赋值
< AutoLoad Url ="MailManage/Main.aspx" ShowMask ="true" Mode ="IFrame" >
</ AutoLoad >
</ ext:Panel >
效果:
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
核心代码： Editable="false" Disabled="true"
效果：
.Net控件不可编辑状态常用的属性： Enabled="false" 在这里Ext.net中没效果，
ReadOnly="true" 还有其他属性则是缺胳膊少腿的
前端大致代码：这里需注意：store下属性Proxy不可少。官方解释
“ proxy :
Ext.data.DataProxy
Proxy对象，用于访问数据对象。proxy The Proxy ob...
Proxy对象，用于访问数据对象。proxy The Proxy object which provides access to a data object.
”通俗的讲就是数据代理，另外分页页面需刷新所以别忘了“O nRefreshData“。另外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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
分类: Ext.Net
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息