2012-07-06 31 views
1

我想建立一个简单的表单,我可以用它来创建一个记录(C = Create),从数据库读取记录数据(R = Read),更新记录从数据库(U =更新)中删除并从数据库中删除记录(D =删除)。我不想在Ext JS例子中使用PHP。我宁愿在ASP.NET中使用WCF或HTTP处理程序(* .ashx文件)。有人可以帮我用这个代码吗?我不需要有关数据库访问的详细信息。我只是在努力获取客户端代码方面,以及我应该在服务器代码方法中使用哪些参数和返回类型。使用CRUD与Ext JS 4动态表格

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

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

我在亚马逊网站上订购了Web应用程序的Ext JS 4 Cookbook,但是它现在已经订购了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

+0

http://peterkellner.net/2012/04/20/details-on-the-extjs-application-to-build-simple-crud-operation-using-models-and-stores/ – VJAI 2012-07-06 21:14:25

+0

这是ASP。 NET MVC,而不是ASP.NET。不幸的是,我对MVC不熟悉: - \ – MacGyver 2012-07-06 23:14:05

+0

这似乎是最好的例子,它在MVC应用程序中从头到尾都会引导你。您可以按照Sencha提供的MVC指南(教程),它实际上没有做任何写作 - 它只是模仿写作。 CouchDB非关系非规范化的JSON文档数据库结构非常有趣。 http://averydc.com/ee/index.php/blog/couchdb_extjs4_a_winning_combination – MacGyver 2012-07-14 14:20:47

回答

1

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

从ExtJs的角度来看,与使用PHP相比,实际上没有太大的区别 - 当然这里和那里有一些怪癖,但是在配置WCF为您提供JSON数据之后,它们非常相似。

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

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

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

+0

你能把这段代码放到我已有的代码中,然后更新你的答案吗? – MacGyver 2012-07-08 21:29:49

+0

我最终使用了asmx,所以我现在将其标记为正确,除非有人发布了更详细的答案。长期来看,我想切换到WCF。 – MacGyver 2012-10-15 04:04:31