在EXTJS選項卡中呈現Django表單

Question

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

Answer 1

如果你想保持它的標籤內，則您需要放棄標準HTML表單機制，而​​是將按鈕上的onclick事件設置爲p通過AJAX執行POST。