Home

Awesome

django-extjs

PROJECT MOVED TO https://github.com/revolunet/extdirect.django

Django Form and ModelForm power for your ExtJs apps. See ExtJS dual licence

Convert your forms.Form and forms.ModelForm to extjs and handles the form submission like any django form.

Generate custom ExtJs dynamic grids from django querysets. You can also set your grids as Editable.

Tested with ExtJs 3 and Django >= 1 Feedback needed : julien@bouquillon.com

There is a full working demo project based on my django-skeleton here : ExtJs django-skeleton branch this is where you should start.

Grid example :

# the django view
def users_grid(request):
    # return Json autogrid configuration
    grid = grids.ModelGrid(User)            # generic grid from model fields (can be customised)
    users = User.objects.all()              # use any queryset
    json = grid.to_grid(users, limit = 25)    
    return utils.JsonResponse(json)

# the javascript (ExtJs 3) :
var users_grid = new Ext.ux.AutoGrid({
    autoWidth:true
    ,showBbar:true
    ,loadMask:true
    ,store:new Ext.data.JsonStore({
         autoLoad:true
        ,remoteSort:true
        ,proxy:new Ext.data.HttpProxy({
             url:'apps/main/users_grid'
            ,method:'POST'
        })
    })
});

var w = new Ext.Window({
     title:'autogrid !'
    ,items:users_grid
}).show();

Form example :

# the django view

# the form definition (could also be a ModelForm)
class ContactForm(forms.Form):
    name = forms.CharField(label='your name')
    phone = forms.CharField(label='phone number', required = False)
    mobile_type = forms.CharField(label='phone type', required = True)
    mobile_type.choices = [
         ('ANDROID','Android')
        ,('IPHONE','iPhone')
        ,('SYMBIAN','Symbian (nokia)')
        ,('OTHERS','Others')
    ]
    email = forms.EmailField(label='your email', initial='test@revolunet.com')
    message = forms.CharField(label='your message', widget = forms.widgets.Textarea(attrs={'cols':15, 'rows':5}))

ExtJsForm.addto(ContactForm)        # new methods added to the form
        
# the form view
def contact_form(request, path = None):
    if request.method == 'POST':
        # handle form submission
        form = ContactForm(request.POST)
        if not form.is_valid():
            return utils.JsonError(form.html_errorlist())
        else:
            # send your email
            print 'send a mail'
        return utils.JsonResponse(utils.JSONserialise({
            'success':True, 
            'messages': [{'icon':'/core/static/img/famfamfam/accept.png', 'message':'Enregistrement OK'}]
            }) )
    else:
        # handle form display
        form = ContactForm()
        return utils.JsonResponse(utils.JSONserialise(form.as_extjsfields()))
        

# the javascript (ExtJs 3) :
var contact_win = new Ext.Window({
    title:'django form example'
    ,width:300
    ,y:420
    ,layout:'fit'
    ,height:300
    ,items:new Ext.ux.DjangoForm({
            border:false
            ,intro:'generated contact form'
            ,showButtons:true
            ,showSuccessMessage:'Form submission success'
            ,url:'apps/main/contact_form' 
            ,scope:this
             ,callback:function(form) {
                form.doLayout();
             }
       })
     ,draggable :true
}).show();

The lib provides :

Features :

Flexibility :

Dependencies :

Todo :