.NET 3.5에서 asp.net과 wcf와 함께 extjs를 사용하는 모범 사례는 무엇입니까?
https://stackoverflow.com/questions/186456
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
ExtJS 양식에서 데이터를 저장하는 방법은 무엇입니까? 비즈니스 계층에서 데이터를 형태 또는 그리드로로드 하시겠습니까?
해결책 5
아마도 나는 최상의 솔루션을 찾았을 것입니다http://developmentalmadness.blogspot.com/2008/07/using-extjs-with-wcf.html
다른 팁
저에게는 ASHX 페이지를 사용하여 직선 XML을 푸시 한 다음 ExtJS 데이터 리더를 사용하여 읽습니다. 그런 다음 양식 등을 사용하여 양식 데이터를 다른 ASHX 페이지로 바로 다시 눌러 심문/게시합니다. DB .. 내가 최선의 방법을 알고 있다면 DAREND- 그러나 그것은 나에게 적합하고 매우 빠르고 안정된 것처럼 보이며 가장 중요한 것은 팔로우/디버그가 더 쉽다는 것입니다.
도움이되면 코드 예제가 있습니다.
데이터 얻기
보시다시피, 데이터를 가져 오는 URL은 간단한 Ashx (일반 핸들러) .NET 페이지를 얻습니다.
// 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 페이지에서 데이터는 단순히 게시 된 양식으로 제공됩니다. 즉, 정상 요청을 통해 액세스 할 수 있습니다. 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();
다시 말하지만, 이것이 다소 도움이되기를 바랍니다. 아마도 코딩하기에는 너무 나이가 들었습니다!
우리는 ExtJ와 WCF의 조합을 큰 성공으로 사용했습니다. 우리는 정기적 인 ASP.NET 페이지를 사용하여 테마, 인증 및 기본 페이지 UI를 제공 한 다음 클라이언트 측에서 extjs가 발행 한 WCF 서비스로 시작하여 순수한 간단한 베어 형식 JSON ( "D"속성없이)을 반환했습니다. 정말 훌륭했습니다. WCF 서비스는 또한 동일한 웹 응용 프로그램의 일부 였으므로 사용자 인증/인증이 사용되었습니다.
우리가 가진 유일한 문제는 페이지를 반환하는 파일과 AJAX와 일반 ASP.NET Postbacks의 조합을 사용한 페이지를 반환하는 것이 었습니다. 우리는 그 왕복에 대한 extjs 컨트롤 지속성을 돌봐야했습니다. 그러나 우리는 어쨌든 그것을 만들었습니다.
ExtJS+WCF는 훌륭하게 작동했으며 더 많은 창 앱이어야하는 웹 응용 프로그램을 수행하는 사람에게 추천합니다. 일반 ASP.NET 페이지 기능 및 AJAX 조합으로 프로젝트를 과도하게 복제하지 마십시오. 또는 업데이트 패널도 마찬가지입니다.
웹 서비스를 통해서만 ASP.NET과 함께 ExtJS를 사용했습니다. "페이지"와 그 모든 것들없이 일할 의향이 있다면 그것은 잘 작동합니다.
GWT의 Java로 ExtJS를 개발하는 데 관심이 있다면이 ExtJS-GWT GXT 블로그에서 자세한 내용을 배울 수 있습니다. 아마도 당신을 도울 수도 있습니다EXT JS-GWT를 설정하는 방법 : Eclipse Ganymede 3.4의 GXT 및 예제
제휴하지 않습니다 StackOverflow
