Home/ Questions/Q 8189829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:24:54+00:00

I’d like to build a simple form that I can use to create a

  • 0

I’d like to build a simple form that I can use to create a record (C=Create), read the record data from a database (R=Read), update the record from a database (U=Update) and delete the record from a database (D=Delete). I don’t want to use PHP as in the Ext JS examples. I’d prefer to use WCF or an HTTP Handler (*.ashx file) in ASP.NET. Can someone help me with the code for this? I don’t need details on the database access. I’m just struggling with getting the client code aspect, and what parameters and return types I should use on the server code methods.

I’d like to mimic this architecture but use the Ext JS client code:
http://www.codeproject.com/Articles/283976/CRUD-Create-Read-Update-Delete

And if you choose WCF, I’m using REST, not SOAP:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=728

I ordered the Ext JS 4 Cookbook for Web Applications on Amazon.com, but it’s been on back order for 2 months now.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>...</title>

    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../ext-all.js"></script>

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- GC -->


    <!-- Example -->
    <script type="text/javascript" src="dynamic.js"></script>
</head>
<body>

<h1>CRUD example with Ext JS 4 dynamic form</h1>

</body>
</html>

JavaScript

Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
    '*'
]);

Ext.onReady(function () {
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
    * ================  Simple form  =======================
    */
    bd.createChild({ tag: 'h2', html: 'Form 1 - Very Simple' });

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

    var simple = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'simpleForm',
        url: 'save-form.php',
        frame: true,
        title: 'Simple Form',
        bodyPadding: '5 5 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            afterLabelTextTpl: required,
            name: 'first',
            allowBlank: false
        }, {
            fieldLabel: 'Last Name',
            afterLabelTextTpl: required,
            name: 'last'
        }, {
            fieldLabel: 'Company',
            name: 'company'
        }, {
            fieldLabel: 'Email',
            afterLabelTextTpl: required,
            name: 'email',
            vtype: 'email'
        }, {
            fieldLabel: 'DOB',
            name: 'dob',
            xtype: 'datefield'
        }, {
            fieldLabel: 'Age',
            name: 'age',
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 100
        }, {
            xtype: 'timefield',
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        }],

        buttons: [{
            text: 'Save'
        }, {
            text: 'Cancel'
        }]
    });

    simple.render(document.body);

});

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your question is kind of very vague and this is probably the main reason you’re not getting any answers. I just launched rather big web application after 6mo development cycle with ExtJs as a front end, entity framework and SQL Server as a back end.

    There is really not so much difference from the ExtJs perspective comparing to say working with PHP – of course there are some quirks here and there, but after you configure WCF to provide you JSON data – there are very similar.

    You can start by specifying different URLs in your proxy class (because WCF will handle UCD portion of CRUD in one SubmitChanges handler:

    read: 'GetData',
update: 'SubmitChanges',
create: 'SubmitChanges',
destroy: 'SubmitChanges'

    I’d be happy to help if you have any specific questions.

    • 0