Was ist die beste Methode die Verwendung von ExtJS mit Asp.net und WCF in .NET 3.5?

Für mich, ich habe eine ASHX Seite zu schieben gerade auf XML und verwenden Sie dann die ExtJS data reader zu Lesen.. dann, sagen wir ein Formular etc, Schiebe ich die Daten in das Formular sofort wieder zu einem anderen ASHX Seite zu vernehmen/post an die DB ... verdammt, wenn ich weiß, der beste Weg - aber es passte mir ausgezeichnet, und scheint sehr schnell und stabil, und vor allem ist es einfacher zu Folgen/debug.

Hier ist ein code Beispiel, wenn es hilft... hoffentlich nicht zu behindern!

ABRUFEN VON DATEN

Wie Sie sehen werden, ist der URL zum abrufen der Daten ist immer eine einfache ASHX (generic handler) .NET-Seite, die zurück gerade 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

DATEN ZU DEN EXTJS-GRID

Ok, ich habe einige zusätzliche code hier, erstellt eine Symbolleiste im oberen Teil des Rasters, die Sie ignorieren können...

    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

VERÖFFENTLICHUNG VON DATEN AUS EINEM FORMULAR IM BACKEND

Wieder, beachten Sie die url im ersten Teil der definition.. schicken die gebuchten Formular-Daten zurück zu einem anderen ASHX Seite zu senden an die 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

DAS LETZTE BISSCHEN, UM WIRKLICH FÜLLEN SIE DAS OBIGE FORMULAR, UM DIE BACKEND...

Dieses Fenster verwendet die Formular-definition oben, um tatsächlich die Daten übermitteln.. in der ASHX-Seite die Daten einfach so durch kommt wie eine geschrieben form - d.h. Sie können den Zugriff über normale Anfrage.form-Objekt.. ich weiß, es ist ein Weg, um im wesentlichen post-Daten des Formulars an die ASHX-Seite als XML -, obwohl für meine Zwecke ist es nicht erforderlich war, - eine ganz einfache form.

        // ---------------------------------------------------------------------------------------------
        // 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();

Wieder, hoffe, das hilft etwas - hat mich ein paar Wochen zu bekommen!! langsam zu alt für die Codierung vielleicht!

InformationsquelleAutor

Ich verwendet, ExtJs in Verbindung mit ASP.NET nur durch die web-services. Es funktioniert nur gut, wenn Sie bereit sind, zu arbeiten, ohne "Seite" und all das Zeug.

InformationsquelleAutor Marko Dumic

Wahrscheinlich fand ich die beste Lösung
http://developmentalmadness.blogspot.com/2008/07/using-extjs-with-wcf.html

InformationsquelleAutor Michael Dubakov