ext.net 开发学习— 2012 上半年 总结

介绍： 主要总结了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同样实现不了

 代码：

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); 
            }
        }

绑定已选项

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不可编辑状态

 代码：

<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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。