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

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

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

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

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

<ext:CommandColumn Width="25" Hideable="false">
                                    <Commands>
                                        <ext:GridCommand CommandName="Edit" Icon="ApplicationFormEdit">
                                            <ToolTip Text="编 辑" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />
                                </ext:CommandColumn>
                                <ext:CommandColumn Width="25" Hideable="false">
                                    <Commands>
                                        <ext:GridCommand CommandName="Delete" Icon="Cross">
                                            <ToolTip Text="删 除" />
                                        </ext:GridCommand>
                                    </Commands>
                                    <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />
                                </ext:CommandColumn>
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel runat="server" SingleSelect="true" />
                        </SelectionModel>
                        <LoadMask ShowMask="true" />
                        <Listeners>
                            <Command Fn="commandHandler" />
                        </Listeners>
                    </ext:GridPanel>

   var commandHandler = function (cmd, record) {
            switch (cmd) {
                case "Edit":
                    var win = OrgInfoWin;
                    var effDate = record.data.EffDate;
                    if (effDate != null && typeof (effDate) == "string") {
                        effDate = effDate.toString();
                        record.data.EffDate = eval("new " + effDate.substr(1, effDate.length - 2));
                    }
                    var expDate = record.data.ExpDate;
                    if (expDate != null && typeof (expDate) == "string") {
                        expDate = expDate.toString();
                        record.data.ExpDate = eval("new " + expDate.substr(1, expDate.length - 2));
                    }
                    orgPanel.form.loadRecord(record);
                    win.setTitle(record.data.OrgName);
                    win.show();
                    break;
                case "Delete":
                    Ext.Msg.confirm('Alert', 'Delete Record?', function (btn) {
                        if (btn == "yes") {
                            dsCustomers.remove(record);
                            dsCustomers.save();
                        }
                    });
                    break;
            }
        };

commandHandler 中的orgPanel就是对应的FormPanel。重点是FormPanel中的<ext:TextField>等控件的Id名称必须和data中的数据的名称对应，并且数据类型也应该一致，这样才能绑定上，夜已深了，潦草的写一下，还望见谅！

2012-06-18 23:51:57