Ext.define('Sharera.view.user.system.user.User.Filter', {
extend : 'Ext.form.Panel',
alias : 'widget.user.filter',
collapsed : false,
collapsible:true,
frame:true,
autoScroll:true,
height:150,
layout:'fit',
initComponent : function() {
/* this.dockedItems= [{
xtype: 'toolbar',
dock: 'bottom',
items: [
'->',
{ xtype: 'button', text: '搜索',iconCls:'icon-zoom' },
{ xtype: 'button', text: '清空' ,iconCls:'icon-refuse'}
]
}],*/
this.items=[{
xtype:'form',
frame:true,
bodyStyle : {
background : 'none',
padding : '3px',
border : '0'
},
fieldDefaults: {
labelWidth: 40,
xtype:'textfield'
},
items: [{
xtype: 'container',
layout: 'hbox',
padding : '3px',
defaultType: 'textfield',
items: [{
xtype: 'combobox',
fieldLabel: '姓名',
triggerAction:'query',
name:'fullname',
flex:1,
store:Ext.create('Sharera.store.user.system.user.ComBoFullname',{key:'fullname'}),
displayField: 'value',
valueField: 'value',
queryMode: 'remote',
minChars: 1 // 指定至少输入2个字符才会发送请求
},{
xtype:'displayfield',
width:'30'
},{
xtype: 'combobox',
fieldLabel: '别名',
triggerAction:'query',
name:'alias',
flex:2,
store:Ext.create('Sharera.store.user.system.user.ComBoAlias',{key:'alias'}),
displayField: 'value',
valueField: 'value',
queryMode: 'remote',
minChars: 1 // 指定至少输入2个字符才会发送请求
},{
xtype:'displayfield',
width:'30'
},{
xtype:'combo',
fieldLabel:'性别',
labelWidth: 30,
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{"value":"男", "name":"男"},
{"value":"女", "name":"女"}
]
}),
name:'sex',
width:80,
queryMode: 'local',
valueField: 'value',
displayField: 'name'
},{
xtype:'displayfield',
width:'30'
},{
xtype:'combo',
flex:1,
fieldLabel:'类型',
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{"value":"分析师", "name":"分析师"},
{"value":"高管", "name":"高管"},
{"value":"监管机构", "name":"监管机构"},
{"value":"机构帐户", "name":"机构帐户"}
]
}),
name:'category',
queryMode: 'local',
valueField: 'value',
displayField: 'name'
},{
xtype:'displayfield',
flex:2
}]
}, {
xtype: 'container',
layout: 'hbox',
padding : '3px',
defaultType: 'textfield',
items: [
Ext.create("Sharera.view.user.system.user.UserTag.comBoxTree", {
name : 'tags',
hiddenName : 'hiddenName',
storeUrl : context+'api/usertag/tree.json?type=tagCheckTree',
flex:3,
fieldLabel : '标签',
labelWidth : 40,
rootText : 'root'
}),{
xtype:'displayfield',
width:'30'
},{
xtype: 'combobox',
fieldLabel: '手机',
triggerAction:'query',
name:'phone',
flex:2,
store:Ext.create('Sharera.store.user.system.user.ComBoPhone',{key:'phone'}),
displayField: 'value',
valueField: 'value',
queryMode: 'remote',
minChars: 3 // 指定至少输入2个字符才会发送请求
},{
xtype:'displayfield',
width:'30'
},{
xtype: 'combobox',
fieldLabel: '邮箱',
triggerAction:'query',
name:'email',
flex:3,
store:Ext.create('Sharera.store.user.system.user.ComBoPhone',{key:'email'}),
displayField: 'value',
valueField: 'value',
queryMode: 'remote',
minChars: 3 // 指定至少输入2个字符才会发送请求
},{
xtype:'displayfield',
flex:3
}]
},{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: '创建时间',
labelWidth: 60,
padding : '3px',
items: [{
xtype: 'datefield',
maxValue: new Date(),
name: 'start_date'
},{
xtype:'displayfield',
width:'10'
},{
xtype: 'datefield',
anchor: '100%',
fieldLabel: '到',
labelWidth: 20,
name: 'end_date',
value: new Date()
},{
xtype:'displayfield',
width:'30'
},{
xtype:'button',
text: '搜索',
iconCls:'icon-zoom',
formBind: true,
disabled: true,
handler: function(b) {
var formObj=b.up('form').getForm();
var panel = b.ownerCt.ownerCt.ownerCt.ownerCt;
var grid=panel.down('panel[xtype=user.grid]');
var store=grid.getStore();
var fullname=formObj.findField('fullname').getValue( );
var alias=formObj.findField('alias').getValue( );
var sex=formObj.findField('sex').getValue( );
var category=formObj.findField('category').getValue( );
var phone=formObj.findField('phone').getValue( );
var email=formObj.findField('email').getValue( );
var tags=formObj.findField('tags').getSumbitValue( );
var sTime=formObj.findField('start_date').getValue();
var eTime=formObj.findField('end_date').getValue();
var startTime=Ext.util.Format.date(sTime, 'Y-m-d');
var endTime=Ext.util.Format.date(eTime, 'Y-m-d');
store.reload({
params: {
fullname:fullname,
alias:alias,
sex:sex,
category:category,
phone:phone,
email:email,
tags:tags,
sTime:startTime,
eTime:endTime
}
});
}
},{
xtype:'displayfield',
width:'10'
},{
xtype:'button',
text: '重置',
iconCls:'icon-refuse',
handler: function() {
this.up('form').getForm().reset();
}
}]
}]/*,
buttons: [{
text: '搜索',
iconCls:'icon-zoom',
formBind: true,
disabled: true,
handler: function(b) {
var formObj=b.up('form').getForm();
var panel = b.ownerCt.ownerCt.ownerCt.ownerCt;
var grid=panel.down('panel[xtype=user.grid]');
var store=grid.getStore();
var fullname=formObj.findField('fullname').getValue( );
var alias=formObj.findField('alias').getValue( );
var sex=formObj.findField('sex').getValue( );
var category=formObj.findField('category').getValue( );
var phone=formObj.findField('phone').getValue( );
var email=formObj.findField('email').getValue( );
var tags=formObj.findField('tags').getSumbitValue( );
var sTime=formObj.findField('start_date').getValue();
var eTime=formObj.findField('end_date').getValue();
var startTime=Ext.util.Format.date(sTime, 'Y-m-d');
var endTime=Ext.util.Format.date(eTime, 'Y-m-d');
store.reload({
params: {
fullname:fullname,
alias:alias,
sex:sex,
category:category,
phone:phone,
email:email,
tags:tags,
sTime:startTime,
eTime:endTime
}
});
}
},{
text: '重置',
iconCls:'icon-refuse',
handler: function() {
this.up('form').getForm().reset();
}
}]*/
}],
this.callParent(arguments);
}
});
Ext.define("Sharera.view.user.system.user.UserTag.comBoxTree", {
extend: "Ext.form.field.Picker",
requires: ["Ext.tree.Panel"],
initComponent: function() {
var self = this;
Ext.apply(self, {
fieldLabel: self.fieldLabel,
labelWidth: self.labelWidth
});
self.callParent();
},
submitValue:'',
createPicker: function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore', {
model: 'Sharera.model.user.system.user.UserTagTree',
listeners:{
load:function(store,records,successFull,o){
Ext.each(records,function(item){
var childs=item.childNodes;
Ext.each(childs,function(child){
if(child.data.reserve=='root'){
child.set('checked',null);
}
})
});
}
},
defaultRootId:'root',
proxy: {
type: 'ajax',
url: self.storeUrl
},
sorters: [{
property: 'leaf',
direction: 'ASC'
},
{
property: 'name',
direction: 'ASC'
}]
});
self.picker = Ext.create("Sharera.view.user.system.user.User.ComboTagTree",{
height: 300,
autoScroll: true,
floating: true,
displayField :'name',
focusOnToFront: false,
shadow: true,
ownerCt: this.ownerCt,
useArrows: true,
store: store,
rootVisible: false
});
self.picker.on({
checkchange: function(record, checked) {
var checkModel = self.checkModel;
if (checkModel == 'double') {
var root = self.picker.getRootNode();
root.cascadeBy(function(node) {
if (node.get('name') != record.get('name')) {
node.set('checked', false);
}
});
if (record.get('leaf') && checked) {
self.setRawValue(record.get('id')); // 隐藏值
self.setValue(record.get('name')); // 显示值
} else {
record.set('checked', false);
self.setRawValue(''); // 隐藏值
self.setValue(''); // 显示值
}
} else {
var cascade = self.cascade;
if (checked == true) {
if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {
if (cascade == 'child' || cascade == 'both') {
if (!record.get("leaf") && checked) record.cascadeBy(function(record) {
record.set('checked', true);
});
}
if (cascade == 'parent' || cascade == 'both') {
pNode = record.parentNode;
for (; pNode != null; pNode = pNode.parentNode) {
pNode.set("checked", true);
}
}
}
} else if (checked == false) {
if (cascade == 'both' || cascade == 'child' || cascade == 'parent') {
if (cascade == 'child' || cascade == 'both') {
if (!record.get("leaf") && !checked) record.cascadeBy(function(record) {
record.set('checked', false);
});
}
}
}
var records = self.picker.getView().getChecked(),
names = [],
values = [];
Ext.Array.each(records,
function(rec) {
names.push(rec.get('name'));
values.push(rec.get('id'));
});
self.setSubmitValue(values.join(',')); // 隐藏值
self.setValue(names.join(',')); // 显示值
}
},
itemclick: function(tree, record, item, index, e, options) {
var checkModel = self.checkModel;
if (checkModel == 'single') {
if (record.get('leaf')) {
self.setSubmitValue(record.get('id')); // 隐藏值
self.setValue(record.get('name')); // 显示值
} else {
self.setRawValue(''); // 隐藏值
self.setValue(''); // 显示值
}
}
}
});
return self.picker;
},
setSubmitValue:function(value){
this.submitValue=value
},
getSumbitValue:function(){
return this.submitValue
},
alignPicker: function() {
var me = this,
picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset); // ""->tl
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls': 'removeCls'](me.openCls + aboveSfx);
picker.el[isAbove ? 'addCls': 'removeCls'](picker.baseCls + aboveSfx);
}
}
}
});
Ext.define('Sharera.view.user.system.user.User.ComboTagTree', {
extend: 'Ext.tree.Panel',
mixins: {
treeFilter: 'Sharera.util.TreeFilter'
},
tbar:[{
xtype: 'trigger',
triggerCls: 'x-form-clear-trigger',
onTriggerClick: function () {
this.setValue('');
var panel=this.ownerCt.ownerCt;
panel.clearFilter();
},
width:'100%',
emptyText:'可以输入标签名称进行搜索',
enableKeyEvents: true,
listeners: {
keyup: {
fn: function (field, e) {
var panel=this.ownerCt.ownerCt;
var by=[];
by.push('name')
if (Ext.EventObject.ESC == e.getKey()) {
field.onTriggerClick();
} else {
panel.filterByText(this.getRawValue(),by,true);
}
}
}
}
}],
initComponent : function() {
this.callParent(arguments);
}
});
/*
* param:{
* 1.text,输入的文本
* 2.搜索哪个字段
* 3.搜索字段是不是一个数组
* }
*/
Ext.define("Sharera.util.TreeFilter",{
filterByText: function(text,by,isByArr) {
this.filterBy(text, by,isByArr);
},
/**
* Filter the tree on a string, hiding all nodes expect those which match and their parents.
* @param The term to filter on.
* @param The field to filter on (i.e. 'text').
*/
filterBy: function(text, by,isByArr) {
this.clearFilter();
var view = this.getView(),
me = this,
nodesAndParents = [];
// Find the nodes which match the search term, expand them.
// Then add them and their parents to nodesAndParents.
this.getRootNode().cascadeBy(function(tree, view){
var currNode = this;
if(isByArr){
for(var i=0;i<by.length;i++){
if(currNode && currNode.data[by[i]] && currNode.data[by[i]].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {
me.expandPath(currNode.getPath());
while(currNode.parentNode) {
nodesAndParents.push(currNode.id);
currNode = currNode.parentNode;
}
}
}
}
else{
if(currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {
me.expandPath(currNode.getPath());
while(currNode.parentNode) {
nodesAndParents.push(currNode.id);
currNode = currNode.parentNode;
}
}
}
}, null, [me, view]);
// Hide all of the nodes which aren't in nodesAndParents
this.getRootNode().cascadeBy(function(tree, view){
var uiNode = view.getNodeByRecord(this);
if(uiNode && !Ext.Array.contains(nodesAndParents, this.id)) {
Ext.get(uiNode).setDisplayed('none');
}
}, null, [me, view]);
},
clearFilter: function() {
var view = this.getView();
this.getRootNode().cascadeBy(function(tree, view){
var uiNode = view.getNodeByRecord(this);
if(uiNode) {
Ext.get(uiNode).setDisplayed('table-row');
}
}, null, [this, view]);
}
});
本文详细介绍了如何在用户管理系统中实现高效的用户筛选与搜索功能，包括姓名、别名、性别、类型、创建时间等关键属性的过滤条件设定，以及标签、手机号、邮箱等额外信息的搜索方式。
扫一扫
2958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
