ext.net gridpanel选中行数据传递到formpanle

最新推荐文章于 2024-09-14 19:55:29 发布

weixin_30800987

最新推荐文章于 2024-09-14 19:55:29 发布

阅读量72

点赞数

文章标签：数据库测试 javascript ViewUI

原文链接：http://www.cnblogs.com/rpoplar/archive/2012/06/18/2554182.html

版权

　　公司最近要做一个web项目，为了快速开发，决定使用ext.net来开发。在之前的一年多时间里全是做的一些桌面开发，asp.net方面的很多东西都忘记了，特别是javascript相关的东西，很久没有用了。于是前几天抓紧时间熟悉ext.net ,下载了相关的源码和案例自学。看了一下觉得基本懂了，于是试着搞搞结果自己一动手才知道问题多多。首先是ext.net 的mvc实现业务数据层的处理都是采用url配置路由来是实现的，这个功能我也是看了半天。

　　言归正传说说今天晚上的主题：如何把一个GridPanel中选中的某行数据，传递到一个弹出Window的FromPanel中去，并实现数据和控件的自动绑定呢？

　　有人说可以传递该行数据的主键ID，让后从数据库等数据源中去读取，这里我认为这是很“费劲的”处理方式，不仅加大了数据库等数据源的访问量，效率也会更底。因为这些数据基本上已经是从数据库取得了的，何必再次问人家获取一次呢！经过研究可以通过使用FormPanel的form.loadRecord(data)来实现。

　　直接上代码：比如Gridpanel最后有一列编辑列。

GridPanel Edit Column

 1 <ext:CommandColumn Width="25" Hideable="false">
 2                                     <Commands>
 3                                         <ext:GridCommand CommandName="Edit" Icon="ApplicationFormEdit">
 4                                             <ToolTip Text="编 辑" />
 5                                         </ext:GridCommand>
 6                                     </Commands>
 7                                     <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />
 8                                 </ext:CommandColumn>
 9                                 <ext:CommandColumn Width="25" Hideable="false">
10                                     <Commands>
11                                         <ext:GridCommand CommandName="Delete" Icon="Cross">
12                                             <ToolTip Text="删 除" />
13                                         </ext:GridCommand>
14                                     </Commands>
15                                     <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />
16                                 </ext:CommandColumn>
17                             </Columns>
18                         </ColumnModel>
19                         <SelectionModel>
20                             <ext:RowSelectionModel runat="server" SingleSelect="true" />
21                         </SelectionModel>
22                         <LoadMask ShowMask="true" />
23                         <Listeners>
24                             <Command Fn="commandHandler" />
25                         </Listeners>
26                     </ext:GridPanel>

commandHandler

 1    var commandHandler = function (cmd, record) {
 2             switch (cmd) {
 3                 case "Edit":
 4                     var win = OrgInfoWin;
 5                     var effDate = record.data.EffDate;
 6                     if (effDate != null && typeof (effDate) == "string") {
 7                         effDate = effDate.toString();
 8                         record.data.EffDate = eval("new " + effDate.substr(1, effDate.length - 2));
 9                     }
10                     var expDate = record.data.ExpDate;
11                     if (expDate != null && typeof (expDate) == "string") {
12                         expDate = expDate.toString();
13                         record.data.ExpDate = eval("new " + expDate.substr(1, expDate.length - 2));
14                     }
15                     orgPanel.form.loadRecord(record);
16                     win.setTitle(record.data.OrgName);
17                     win.show();
18                     break;
19                 case "Delete":
20                     Ext.Msg.confirm('Alert', 'Delete Record?', function (btn) {
21                         if (btn == "yes") {
22                             dsCustomers.remove(record);
23                             dsCustomers.save();
24                         }
25                     });
26                     break;
27             }
28         };