Question

i’m using solr+haystack(django plugin) on the backend and the search is working fine;

While Django(and Haystack) with its templates is doing everything for me(I mean its pretty simple to configure and use), ExtJS4 is a little more complex;

The question is how to use Solr using ExtJS4?

An example is very much appreciated;
Thanks for any help and sorry for my English;

Answer 1

As ExtJS4 is a MVC framework, the solution is done like MVC;

The controller/Search.js

Ext.define('yourapp.controller.Search',{
extend:'Ext.app.Controller',

stores:[
    'Searches'
],

views:[
    'search.Search',
    'search.SearchList'
],

models:[
    'Search'
],

init:function(){
    this.control({
        "search":{
            'keyup':this.search,                
        },
    });
},

search:function(inputedTxt, e, eOpts){
    this.getSearchesStore().load({
        //When sending a request, q will rely to request.POST['q'] on server-side;
        //inputedTxt.getValue() -- a value, entered in textfield (or whatever)
        params:{
            q:inputedTxt.getValue()
        },
        callback:function(result){
            if(result[0]){
                //do something with the result
                //i'd been creating a window with a grid inside. "Grid"'s view is written below.
            }
        }               
    }
});

The models/Search.js

Ext.define('yourapp.model.Search',{
    extend:'Ext.data.Model',

    fields:[
        {name:'name',   type:'string'}
    ]   
});

The store/Searches.js

Ext.define('yourapp.store.Searches',{
extend:'Ext.data.Store',
storeId: "searchStore",

model:'yourapp.model.Search',

autoLoad: false,

proxy:{
    type:'ajax',
    // server-side url
    url: '/searchlist/',

    actionMethods:{create: "POST", read: "POST", update: "POST", destroy: "POST"},
    reader:{
        type:'json',
        root:'searches'
    }
}
});

The view/search/Search.js

//a Text field to input text;
Ext.define('yourapp.view.search.Search',{
extend:'Ext.form.field.Text',
alias: 'widget.search',
id:    "searchView",

enableKeyEvents: true,
initComponent:function(){
    this.callParent(arguments);     
}
});

The view/search/SearchList.js

//a view for a result
Ext.define('yourapp.view.search.SearchList',{
extend: 'Ext.grid.Panel',

alias:'widget.searchlist',
title: 'search result',
store: 'Searches',

columns:[
        { 
        header:'Name', 
        dataIndex:'name',
        flex:1                      
    }
]
});

Somewhere in the view/Viewport.js xtype: 'search', should be inserted for a text field to be displayed.

That’s all for a ExtJS4 part.

---

On server-side — Django:
‘haystack’ and Solr should be installed and configured (by ‘configured’ i mean: search should already work on the server-side);

In someapp/view.py

def searchlist(request):    
    from haystack.query import SearchQuerySet
    # POST["q"] should be receivedt from our client-side
    searchText = request.POST["q"]

    sqs = SearchQuerySet().filter(name=searchText)

    data = []
    for result in sqs:            
        data.append({"name": result.object.name})

return HttpResponse('{ success:true, searches:'+simplejson.dumps(data)+'}', mimetype = 'application/json')

Finally in your urls.py you should add:

(r'^searchlist/','someapp.views.searchlist'),

That was for it. Best wishes.

P.S.
I know this is not the greatest answer and there’s lack of explanation, but as for me, I rather prefer a code example than verbal explanation.