在 EXTJS 选项卡中呈现 Django 表单答案

【问题标题】：Rendering Django forms inside an EXTJS tab在 EXTJS 选项卡中呈现 Django 表单
【发布时间】：2010-12-12 08:18:00
【问题描述】：

我能够在 extjs 选项卡中成功呈现我的第一个 django 表单。表单数据显示正确，表单验证似乎工作正常。

我的问题是 django 想要呈现整个新页面，而不仅仅是将结果推回到同一个选项卡中。我认为如果我可以将所有这些都保存在一个选项卡中而不需要完整的页面呈现，我的应用程序会更好地运行。

背景：我使用了 EXTJS ajax 选项卡示例来完成这项工作。然后唯一的问题是该示例没有多个 get/post 调用被渲染到同一个选项卡中，所以我不知道该怎么做。

问题：如何将 POST 数据的结果保存在 EXTJS 选项卡中？另外，来自开发大量此类应用程序的专家，我在这里使用的模式是否正确？

这是我的基本布局：

文件：grid.js - 构建一个 EXTJS 网格，用户单击“编辑”图标调用 django 以获取编辑表单。

  var createColModel = function (finish, start) {

  var columns = [{
      dataIndex: 'pk',
      header: 'Student ID',
      filterable: true
      //,filter: {type: 'numeric'}
  }, {
   // ... More column data here
  },{
      header: 'Actions',
      id: 'actions',
      xtype: 'actioncolumn',
      width: 50,
      items: [{
           icon   : '/site_media/icons/application_edit.png',  
           tooltip: 'Edit Record',
           handler: function(grid, rowIndex, colIndex) {
               var rec = studentStore.getAt(rowIndex);
               mainTabPnl.add({
                   title: rec.get('fields.first_name') + ', ' + rec.get('fields.last_name'),
                   iconCls: 'tabs',
                   autoLoad: {url: '/app/edit_student/' + rec.get('pk')}, 
                   closable:true
               }).show();
           }
       }]
  }];

文件：views.py

 def edit_student_view(request, sid):
   print "Edit Student: " + sid
   student = Student.objects.get(pk=sid)
   if request.method == 'POST': 
     form = StudentProfileForm(request.POST, instance=student) 
     if form.is_valid(): 
       student=form.save() 
       message="Edit successful"
       c = {'form' : form, 'student':student, 'message':message}
       return render_to_response('app/edit_student.html', c, context_instance=RequestContext(request)) 
     else:
       message = "The form contains errors."
       c = {'form':form, 'student':student, 'message':message}
       // Problem: This is now rendered as the whole page, not inside the tab
       return render_to_response('app/edit_student.html', c, context_instance=RequestContext(request)) 
   else:
     form = StudentProfileForm(instance=student) 
     c = {'form':form, 'student':student}
   //Initial GET: renders in correct EXTJS window.
   return render_to_response('app/edit_student.html', c, context_instance=RequestContext(request))

文件：edit_student.html - 渲染 django 表单

 {% block mainpanel %}

 {% if form.errors %}
   <p>The Registration form had errors. Please try again.</p>
 {% endif %}

 {% if form %}
 <form action="/app/edit_student/{{student.student_id}}/" method="post">
    <table>
    {{ form.as_table }}
   </table>
   <input type="submit" value="Submit" />
 </form>
 {%endif%}

 {% endblock %}

【问题讨论】：

标签： ajax django extjs

【解决方案1】：

如果您想将其保留在选项卡中，则需要放弃标准的 HTML 表单机制，而是在按钮上设置 onclick 事件以通过 AJAX 执行 POST。

【讨论】：

onClick还能渲染django表单吗？你知道这种行为的任何例子吗？
它不呈现表单。从视图中返回一个 HTML 片段并将其放置。