title: Rendering Django forms inside an EXTJS tab
body: <p>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.</p>
  
  <p>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.</p>
  
  <p><strong>Background:</strong> 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.  </p>
  
  <p><strong>Question:</strong> 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?</p>
  
  <p>Here's my basic layout:</p>
  
  <p>File: <strong>grid.js</strong> - Builds an EXTJS grid, user clicks 'edit' icon which does a call to django to grab the edit form.</p>
  
  <pre><code>  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();
             }
         }]
    }];
  </code></pre>
  
  <p>File: <strong>views.py</strong></p>
  
  <pre><code> 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)) 
  </code></pre>
  
  <p>File:  <strong>edit_student.html</strong> - renders the django form</p>
  
  <pre><code> {% block mainpanel %}
  
   {% if form.errors %}
     &lt;p&gt;The Registration form had errors. Please try again.&lt;/p&gt;
   {% endif %}
  
   {% if form %}
   &lt;form action="/app/edit_student/{{student.student_id}}/" method="post"&gt;
      &lt;table&gt;
      {{ form.as_table }}
     &lt;/table&gt;
     &lt;input type="submit" value="Submit" /&gt;
   &lt;/form&gt;
   {%endif%}
  
   {% endblock %}
  </code></pre>