使用ExtJs4的Solr live搜索

Question

我在后台使用了solr+haystack(django plugin)，搜索运行良好；

虽然Django(和Haystack)和它的模板为我做了所有的事情(我的意思是它的配置和使用都很简单)，但ExtJS4有点复杂；

问题是如何在ExtJS4中使用Solr？

一个例子是非常感谢的；

感谢您的帮助，并为我的英语表达歉意；

Answer 1

由于ExtJS4是一个MVC框架，所以解决方案就像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                      
    }
]
});

应在view/Viewport.js xtype: 'search',中的某个位置插入要显示的文本字段。

这就是ExtJS4部件的全部内容。

在服务器端-- Django：'haystack‘和Solr应该被安装和配置(’配置‘我的意思是:搜索应该已经在服务器端工作)；

在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')

最后，您应该在urls.py中添加：

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

这就够了。谨致问候。

P.S.

我知道这不是最好的答案，也缺乏解释，但对我来说，我更喜欢代码示例而不是口头解释。

Answer 2

SOLR使用wt=json参数从其查询中获得JSON输出，并且可以很容易地被ExtJS使用。

http://wiki.apache.org/solr/SolJSON?action=fullsearch&context=180&value=jsonp&titlesearch=Titles#JSON_Response_Writer

如果需要使用jsonp，可以通过此参数json.wrf=callback指定回调函数