使用CRUD与Ext JS 4动态表单

时间:2012-07-06 16:30:59

标签: wcf forms extjs crud ashx

我想构建一个可用于创建记录的简单表单(C = Create),从数据库中读取记录数据(R = Read),从数据库更新记录(U = Update)并从数据库中删除记录(D =删除)。我不想像在Ext JS示例中那样使用PHP。我更喜欢在ASP.NET中使用WCF或HTTP Handler(* .ashx文件)。有人可以帮我解决这个问题吗?我不需要有关数据库访问的详细信息。我只是在努力获取客户端代码方面,以及我应该在服务器代码方法上使用哪些参数和返回类型。

我想模仿这个架构,但使用Ext JS客户端代码: http://www.codeproject.com/Articles/283976/CRUD-Create-Read-Update-Delete

如果您选择WCF,我使用的是REST,而不是SOAP:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=728

我在Amazon.com上订购了Ext JS 4 Webbook for Web Applications,但现在已经订购了2个月。

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

1 个答案:

答案 0 :(得分:1)

你的问题很模糊,这可能是你没有得到任何答案的主要原因。我刚刚在6mo开发周期之后启动了相当大的Web应用程序,其中ExtJs作为前端,实体框架和SQL Server作为后端。

与使用PHP相比,ExtJs的观点确实没那么大差别 - 当然这里有一些怪癖,但是在你配置WCF为你提供JSON数据之后 - 有非常相似的。

您可以从代理类中指定不同的URL开始(因为WCF将在一个SubmitChanges处理程序中处理CRUD的UCD部分:

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

如果您有任何具体问题,我很乐意为您提供帮助。