在EXTJS选项卡中呈现Django表单

时间:2010-12-12 08:18:01

标签: ajax django extjs

我能够在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 %}

1 个答案:

答案 0 :(得分:1)

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