Ext 搜索框的制作

Ext 搜索框的制作

Ext.define('knowledgeBaseModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'classification',
mapping : 'classification'
}, {
name : 'clicks',
mapping : 'clicks'
}, {
name : 'committime',
mapping : 'committime'
}, {
name : 'id',
mapping : 'id'
}, {
name : 'keyword',
mapping : 'keyword'
}, {
name : 'status',
mapping : 'status'
}, {
name : 'title',
mapping : 'title'
}, {
name : 'contentss',
mapping : 'contentss'
}  ]
});


// 请求数据
var knowStore_2 = Ext.create('Ext.data.Store', {
model : 'knowledgeBaseModel',
// id : 'knowStore',
pageSize : 15,
proxy : {
type : 'ajax',
url : 'findReviewed.action',
reader : {
// 数据格式为json
type : 'json',
root : 'root',
totalProperty : 'total'
},
extraParams : {
'workOrderTDTO.id' : '',
'workOrderTDTO.title' : '',
'workOrderTDTO.classification' : '',
'workOrderTDTO.keyword' : '',
'workOrderTDTO.clicks' : '',
'workOrderTDTO.committime' : '',
'workOrderTDTO.status' : 5
}
},
autoLoad : false
});

var tPanel_1 = Ext.create("Ext.panel.Panel", {
border : false,
bodyStyle: {  
        background: '#dae5f3',  
    }, 
layout: {
        type: 'hbox',
        align: 'right'
    },
items: [
   { 
xtype : "radio",
boxLabel : "知识关键词",
name : "demo1",
checked : true,
id : 'keywordManage',
margin : '0 5 0 0'
}, {
xtype : "radio",
boxLabel : "标题",
name : "demo1",
id : 'titleManage',
margin : '0 5 0 0'
}, {
xtype : "radio",
boxLabel : "内容",
name : "demo1",
id : 'contentManage',
margin : '0 122 0 0',
}
]
});


var bPanel_1 = Ext.create("Ext.panel.Panel", {
border : false,
bodyStyle: {  
        background: '#dae5f3',  
    },
    layout: {
            type: 'hbox',
            align: 'right'
        },
    items: [
            { 
    xtype : "textfield",
    margin : '0 5 0 0',
    id : 'contentTextManage',
    width : 240
    }, {
    xtype : 'button',
    text : "<img/>&nbsp;搜索",
    handler : function() {
    doTopSearch_1();
    },
    id : "queryBtnManage",
    margin : '0 5 0 0' 
    }
    ]
});


var toolPanel_1=Ext.create("Ext.panel.Panel", {
// hideen:false,
region : 'north',
dockedItems: [{
   xtype: 'toolbar',
   dock: 'top',
   id : "toolManage",
   layout: {
            type: 'vbox',
            align: 'right'
        },
   items: [ bPanel_1,tPanel_1 ]
}],
});

function doTopSearch_1(){
var searchKeyword = Ext.getCmp('keywordManage').getValue();
var searchTitle = Ext.getCmp('titleManage').getValue();
var searchContent = Ext.getCmp('contentManage').getValue();
var contentText = Ext.getCmp('contentTextManage').getValue();
if(searchKeyword == true){
knowStore_2.proxy.extraParams['workOrderTDTO.keyword'] = contentText;
}
if(searchTitle == true){
knowStore_2.proxy.extraParams['workOrderTDTO.title'] = contentText;
}
if(searchContent == true){
knowStore_2.proxy.extraParams['workOrderTDTO.content'] = contentText;
}
knowStore_2.load();
}


function initPanel() {
Ext.create("Ext.form.Panel", {
width : '100%',
height : '100%',
renderTo : Ext.getBody(),
layout : 'border',
items : [ toolPanel_1 ]
});
};

效果如下：