【发布时间】：2010-09-16 05:35:33
【问题描述】：
如何保存 ExtJS 表单中的数据？将数据从业务层加载到表单或网格中？
【问题讨论】：
标签： javascript asp.net-ajax extjs
【发布时间】：2010-09-16 05:35:33
【问题描述】：
对我来说，我使用 ASHX 页面直接推送 XML - 然后使用 ExtJS 数据阅读器读取.. 然后，比如说使用表单等，我将表单数据直接推送回另一个 ASHX 页面以询问/发布到数据库。如果我知道最好的方法，那该死的 - 但它适合我，而且看起来非常快速和稳定，最重要的是它更容易跟踪/调试。
如果有帮助，这里有一些代码示例……希望不要妨碍！
获取数据
如您所见，获取数据的 URL 是一个简单的 ASHX（通用处理程序）.NET 页面，该页面将直接返回 XML...
// Define the core service page to get the data (we use this when reloading)
var url = '/pagedata/getbizzbox.ashx?duration=today';
var store = new Ext.data.GroupingStore(
{
// Define the source for the bizzbox grid (see above url def). We can pass (via the slider)
// the days param as necessary to reload the grid
url: url,
// Define an XML reader to read /pagedata/getbizzbox.ashx XML results
reader: new Ext.data.XmlReader(
{
// Define the RECORD node (i.e. in the XML <record> is the main row definition), and we also
// need to define what field is the ID (row index), and what node returns the total records count
record: 'record',
id: 'inboxID',
totalRecords: 'totalrecords'
},
// Setup mapping of the fields
['inboxID', 'messageCreated', 'subject', 'message', 'messageOpened', 'messageFrom', 'messageFromID', 'groupedMessageDate']),
// Set the default sort scenario, and which column will be grouped
sortInfo: { field: 'groupedMessageDate', direction: "DESC" },
groupField: 'groupedMessageDate'
}); // end of Ext.data.store
到 EXTJS 网格的数据
好的，我这里有一些额外的代码，可以在网格的顶部创建一个工具栏，您可以忽略它...
var grid = new Ext.grid.GridPanel(
{
// Define the store we are going to use - i.e. from above definition
store: store,
// Define column structs
// { header: "Received", width: 180, dataIndex: 'messageCreated', sortable: true, renderer: Ext.util.Format.dateRenderer('d-M-Y'), dataIndex: 'messageCreated' },
columns: [
{ header: "ID", width: 120, dataIndex: 'inboxID', hidden: true },
{ header: "Received", width: 180, dataIndex: 'messageCreated', sortable: true },
{ header: "Subject", width: 115, dataIndex: 'subject', sortable: false },
{ header: "Opened", width: 100, dataIndex: 'messageOpened', hidden: true, renderer: checkOpened },
{ header: "From", width: 100, dataIndex: 'messageFrom', sortable: true },
{ header: "FromID", width: 100, dataIndex: 'messageFromID', hidden: true },
{ header: "Received", width: 100, dataIndex: 'groupedMessageDate', hidden: true }
],
// Set the row selection model to use
gridRowModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
// Set the grouping configuration
view: new Ext.grid.GroupingView(
{
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Messages" : "Message"]})'
}),
// Render the grid with sizing/title etc
frame: true,
collapsible: false,
title: 'BizzBox',
iconCls: 'icon-grid',
renderTo: 'bizzbox',
width: 660,
height: 500,
stripeRows: true,
// Setup the top bar within the message grid - this hosts the various buttons we need to create a new
// message, delete etc
tbar: [
// New button pressed - show the NEW WINDOW to allow a new message be created
{
text: 'New',
handler: function()
{
// We need to load the contacts, howver we only load the contacts ONCE to save
// bandwidth - if new contacts are added, this page would have been destroyed anyway.
if(contactsLoaded==false)
{
contactStore.load();
contactsLoaded=true;
}
winNew.show();
}
},
// Delete button pressed
// We need to confirm deletion, then get the ID of the message to physically delete from DB and grid
{
text: 'Delete', handler: function()
{
Ext.MessageBox.confirm('Delete message', 'are you sure you wish to delete this message?', function(btn) {
// If selected YES, get a handle to the row, and delete
if (btn == 'yes')
{
// Get the selected row
var rec = grid.getSelectionModel().getSelected();
if(rec==null)
{
Ext.Msg.show(
{
title:'No message selected',
msg: 'please ensure you select a message by clicking once on the required message before selecting delete',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.QUESTION
});
}
// Proceed to delete the selected message
else
{
var mesID = rec.get('inboxID');
// AJAX call to delete the message
Ext.Ajax.request(
{
url: '/postdata/bizzbox_message_delete.ashx',
params: { inboxID: mesID },
// Check any call failures
failure: function()
{
Ext.Msg.show(
{
title: 'An error has occured',
msg: 'Having a problem deleting.. please try again later',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}, // end of failure check
// Success check
success: function()
{
// Need to remove the row from the datastore (which doesn't imapct
// a reload of the data)
store.remove(rec);
}
}); // end if delete ajax call
} // end of ELSE for record selected or not
} // end of YES button click
})
} // end of delete button pressed
}] // end of tbar (toolbar def)
}); // end of grid def
将数据从表单发送到后端
同样，请注意定义第一部分中的 url。将发布的表单数据发送回另一个 ASHX 页面，然后发送到 DB...
// ---------------------------------------------------------------------------------------------
// DEFINE THE REPLY FORM
// This is used to show the existing message details, and allows the user to respond
// ---------------------------------------------------------------------------------------------
var frmReply = new Ext.form.FormPanel(
{
baseCls: 'x-plain',
labelWidth: 55,
method: 'POST',
url: '/postdata/bizzbox_message_reply.ashx',
items: [
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'From',
name: 'messageFrom',
value: selectedRow.get('messageFrom'),
anchor: '100%' // anchor width by percentage
},
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'Sent',
name: 'messageCreated',
value: selectedRow.get('messageCreated'),
anchor: '100%' // anchor width by percentage
},
{
xtype: 'textarea',
selectOnFocus: false,
hideLabel: true,
name: 'msg',
value: replyMessage,
anchor: '100% -53' // anchor width by percentage and height by raw adjustment
},
// The next couple of fields are hidden, but provide FROM ID etc which we need to post a new/reply
// message to
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'subject',
name: 'subject',
hidden: true,
hideLabel: true,
value: selectedRow.get('subject')
},
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'FromID',
name: 'messageFromID',
hidden: true,
hideLabel: true,
value: selectedRow.get('messageFromID')
},
{
xtype: 'textfield',
readOnly: true,
fieldLabel: 'InboxID',
name: 'inboxID',
hidden: true,
hideLabel: true,
value: selectedRow.get('inboxID')
}]
}); // end of frmReply
将上述表格实际提交到后端的最后一位...
这个窗口使用上面的表单定义来实际提交数据。在 ASHX 页面中，数据只是作为一个发布的表单传入 - 即您可以通过普通的 Request.form 对象访问。我知道有一种方法可以基本上将表单数据作为 XML 发布到 ASHX 页面，尽管出于我的目的，这不是必需的 - 非常简单的表单。
// ---------------------------------------------------------------------------------------------
// REPLY WINDOW - uses the frmReply as defined previously on stargate atlantis
// ---------------------------------------------------------------------------------------------
var win = new Ext.Window(
{
title: selectedRow.get("subject"),
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: false,
bodyStyle: 'padding:5px;',
buttonAlign: 'right',
items: frmReply,
// Add the action buttons for the message form
buttons: [
{
// When the user replies, we send the form results to the posting ashx which updates
// the DB etc, and returns the result
text: 'reply',
handler: function()
{
frmReply.getForm().submit({ waitMsg: 'Sending your message now...' });
}
},
{
text: 'close',
handler: function()
{
// We need to close the message window
win.close();
}
}]
});
// Show the message detail window
win.show();
再次，希望这会有所帮助 - 我花了几个星期才做到这一点！编码可能太老了！
【讨论】：
我们使用 ExtJS 和 WCF 的组合取得了巨大的成功。我们使用常规的 Asp.net 页面来提供主题、身份验证和基本页面 UI，然后 ExtJS 在客户端启动，向返回纯简单裸格式 JSON（没有“d”属性）的 WCF 服务发出 GET。工作真的很棒。 WCF 服务也是同一个 Web 应用程序的一部分，因此在整个应用程序中都使用了用户身份验证/授权。
我们遇到的唯一问题是页面返回文件和使用两者组合的页面：Ajax 和常规 Asp.net 回发。我们必须在这些往返中处理 ExtJS 控制持久性。但无论如何我们都做到了。
ExtJS+WCF 工作得很好，我会向任何从事 Web 应用程序的人推荐它，该应用程序必须更像窗口应用程序。只是不要使用常规的 asp.net 页面功能和 Ajax 组合使您的项目过于复杂。或者 UpdatePanels。
【讨论】：
我仅通过 Web 服务将 ExtJs 与 ASP.NET 结合使用。如果您愿意在没有“Page”和所有这些东西的情况下工作，它就可以正常工作。
【讨论】：
-
你能提供一些例子吗？
-
你能说得更具体点吗，你到底需要什么？
【讨论】：
-
博客已搬迁，这里是新网址：developmentalmadness.com/archive/2008/07/17/…
如果您有兴趣通过 gwt 使用 java 开发 Extjs，您可以在这个 extjs-gwt gxt 博客中了解更多信息。也许对你有帮助 How to setup Ext js-GWT : GXT and Example on Eclipse Ganymede 3.4
【讨论】：