Question

I was able to successfully render my first django form inside an extjs tab. The form data displayed properly and the form validation appears to be working properly.

My problem is that django wants to render the whole new page, not just push the results back into the same tab. I think my app will function better if I can keep all this inside a single tab without complete page rendering.

Background: I used the EXTJS ajax tab example to get this working. Then only problem is that the example didn’t have multiple get/post calls getting rendered into the same tab, so I’m not sure how to do that.

Question: How do I keep the results of the POST data inside the EXTJS tab? Also, from experts who develop a lot of these apps, am I using the correct pattern here?

Here’s my basic layout:

File: grid.js – Builds an EXTJS grid, user clicks ‘edit’ icon which does a call to django to grab the edit form.

  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();
           }
       }]
  }];

File: 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)) 

File: edit_student.html – renders the django form

 {% 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 %}

Answer 1

If you want to keep it within the tab then you’ll need to forgo the standard HTML form mechanisms and instead set the onclick event on a button to perform a POST via AJAX.