PDA

View Full Version : [SOLVED]custom search.



mayurid
17 Jul 2010, 1:07 AM
i have a combo and custom search i want that, the combo option also should be included in the search option..means when the search is posted i want the combo option to be in search,for example combo value is type,and search field is name so the search should look for both
i need to override the searchfield class?how?

tomtom-
17 Jul 2010, 3:02 AM
May be you can override the onTrigger2Click method in your custom search implementation concatenating the raw value to the combo value.

mayurid
17 Jul 2010, 3:17 AM
May be you can override the onTrigger2Click method in your custom search implementation concatenating the raw value to the combo value.

how to do it any example please i am new to ext..
Ext.onReady(function(){
Ext.QuickTips.init();

var names = [
['Product'],
['Srevice']
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ['name']});
function handleDelete(){
if(grid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Do you want to delete?', deleteRow);
} else if(grid.selModel.getCount() > 1){
Ext.MessageBox.confirm('Confirmation','Delete Rows Selected?', deleteRow);
} else {
Ext.MessageBox.alert('Uh oh...','You can\'t really delete something you haven\'t selected huh?');
}
}
function deleteRow(btn){
if(btn=='yes'){
var selections = grid.selModel.getSelections();
var prez = [];
for(i = 0; i< grid.selModel.getCount(); i++){
prez.push(selections[i].json.id);
}
var encoded_array = Ext.encode(prez);
Ext.Ajax.request({
waitMsg: 'Please Wait',
url: 'gl_acc.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(){
store.load({params : {start : 0}});

},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','Could not connect to the database. Retry later');
}
});
}
}
var Employee = Ext.data.Record.create([{
gl_name: 'gl_name',
type: 'string'
}, {
id: 'id',
type: 'numeric'
}]);

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.ScriptTagProxy({
url:'gl_acc.php'
}),
baseParams:{task: "list"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},
[{name:'id',type:'numeric'}, {name:'gl_name',type: 'string'}

])
});
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url:'gl_acc.php'
}),
baseParams:{task: "search"},//here can i use document.getElementById('product').value..but its not working?
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},
[{name:'id',type:'numeric'}, {name:'gl_name',type: 'string'}

])
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save'});

editor.on('afteredit', function(rowEditor, changes, record, rowIndex){
var record = rowEditor.grid.getStore().getAt(rowIndex);
Ext.Ajax.request({
url:'gl_account_details.php',
params: {
task: 'update',
field: 'gl_name',
row: rowIndex,
id:record.get('id'),
value: changes['gl_name']
}
});
});
var grid = new Ext.grid.GridPanel({
store: store,
width: '100%',
region:'center',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),viewConfig:{ forceFit:true },
tbar: [{xtype:'label',text:'Type'},{
xtype:'combo',
fieldLabel: 'Type',
displayField : 'name',
mode:'local',
id:'product',
name:'product',
typeAhead: false,
store: mySimpleStore,
triggerAction: 'all',
allowBlank : true,
width :120},{xtype:'label',
text: 'Category',
style:{"margin-left":"20px"}
},
new Ext.ux.form.SearchField({
width:130,store:ds,id:'search_field'
}),'->',{
iconCls: 'icon-user-add',
text: 'Add Employee',
id:'add',
handler: function(){
var e = new Employee({
gl_name: 'New Guy',
id:0
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
var s= grid.getSelectionModel().getSelections();
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Employee',

handler:handleDelete

}],
columns: [{header:"ID",dataIndex:'id',width:25,hidden:true},
{
id: 'name',
header: 'First Name',
dataIndex: 'gl_name',
width:200,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],bbar: new Ext.PagingToolbar
({
store:store,

pageSize: 4,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"

})
});
var layout = new Ext.Panel({
title: 'Categories',
layout: 'border',
layoutConfig: {
columns: 1
},
width:'100%',
height:500,

minSize: 100,
maxSize: 500,

items: [grid]
});
layout.render(Ext.getBody());

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});

store.load({params : {start : 0}});
ds.load({params : {start : 0}});

});

mayurid
17 Jul 2010, 3:22 AM
how to do it any idea any example.. i am new to ext..please help

tomtom-
17 Jul 2010, 3:41 AM
There are many ways to do this. Show your implementation.

mayurid
17 Jul 2010, 3:44 AM
There are many ways to do this. Show your implementation.
ok

mayurid
17 Jul 2010, 3:45 AM
i am not able to post my code

mayurid
18 Jul 2010, 8:39 PM
There are many ways to do this. Show your implementation.

Ext.onReady(function(){
Ext.QuickTips.init();

var names = [
['Product'],
['Srevice']
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ['name']});
function handleDelete(){
if(grid.selModel.getCount() == 1)
{
Ext.MessageBox.confirm('Confirmation','Do you want to delete?', deleteRow);
} else if(grid.selModel.getCount() > 1){
Ext.MessageBox.confirm('Confirmation','Delete Rows Selected?', deleteRow);
} else {
Ext.MessageBox.alert('Uh oh...','You can\'t really delete something you haven\'t selected huh?');
}
}
function deleteRow(btn){
if(btn=='yes'){
var selections = grid.selModel.getSelections();
var prez = [];
for(i = 0; i< grid.selModel.getCount(); i++){
prez.push(selections[i].json.id);
}
var encoded_array = Ext.encode(prez);
Ext.Ajax.request({
waitMsg: 'Please Wait',
url: 'gl_acc.php',
params: {
task: "delete",
ids: encoded_array
},
success: function(){
store.load({params : {start : 0}});

},
failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('error','Could not connect to the database. Retry later');
}
});
}
}
var Employee = Ext.data.Record.create([{
gl_name: 'gl_name',
type: 'string'
}, {
id: 'id',
type: 'numeric'
}]);

var store = new Ext.data.GroupingStore({
proxy: new Ext.data.ScriptTagProxy({
url:'gl_acc.php'
}),
baseParams:{task: "list"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},
[{name:'id',type:'numeric'}, {name:'gl_name',type: 'string'}

])
});
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url:'gl_acc.php'
}),
baseParams:{task: "search",type:"product"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},
[{name:'type',type:'string'}, {name:'category_name',type: 'string'}

])
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save'});

editor.on('afteredit', function(rowEditor, changes, record, rowIndex){
var record = rowEditor.grid.getStore().getAt(rowIndex);
Ext.Ajax.request({
url:'gl_account_details.php',
params: {
task: 'update',
field: 'gl_name',
row: rowIndex,
id:record.get('id'),
value: changes['gl_name']
}
});
});
var grid = new Ext.grid.GridPanel({
store: store,
width: '100%',
region:'center',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),viewConfig:{ forceFit:true },
tbar: [{xtype:'label',text:'Type'},{
xtype:'combo',
fieldLabel: 'Type',
displayField : 'name',
mode:'local',
id:'product',
name:'product',
typeAhead: false,
store: mySimpleStore,
triggerAction: 'all',
allowBlank : true,
width :120},{xtype:'label',
text: 'Category',
style:{"margin-left":"20px"}
},
new Ext.ux.form.SearchField({
width:130,store:ds,id:'search_field'
}),'->',{
iconCls: 'icon-user-add',
text: 'Add Employee',
id:'add',
handler: function(){
var e = new Employee({
gl_name: 'New Guy',
id:0
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
var s= grid.getSelectionModel().getSelections();
editor.startEditing(0);
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Employee',

handler:handleDelete

}],
columns: [{header:"type",dataIndex:'type',width:25},
{
id: 'name',
header: 'Name',
dataIndex: 'category_name',
width:200,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],bbar: new Ext.PagingToolbar
({
store:store,

pageSize: 4,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"

})
});
var layout = new Ext.Panel({
title: 'Categories',
layout: 'border',
layoutConfig: {
columns: 1
},
width:'100%',
height:500,

minSize: 100,
maxSize: 500,

items: [grid]
});
layout.render(Ext.getBody());

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});



});

mayurid
19 Jul 2010, 2:56 AM
i posted my implementation, please help.........

Condor
19 Jul 2010, 3:09 AM
So you have a combobox to specify what to search for and a searchfield to do the actual search.

In the combobox select event set the baseParam of the searchfield store.

mayurid
19 Jul 2010, 4:20 AM
So you have a combobox to specify what to search for and a searchfield to do the actual search.

In the combobox select event set the baseParam of the searchfield store.
@condor..thanks for your reply...How to do it i don't know?give some hint or idea?please

Condor
19 Jul 2010, 4:48 AM
Something like:

combobox.on('select', function(combobox, record, index){
searchfield.getStore().setBaseParam('type', record.get('name'));
searchfield.clear();
});

mayurid
19 Jul 2010, 4:57 AM
the combo box i used is a xtype combo,So i am not able to implement.


{xtype:'combo',
fieldLabel: 'Type',
displayField : 'name',
mode:'local',
id:'product',
name:'product',
typeAhead: false,
store: mySimpleStore,
triggerAction: 'all',
allowBlank : true,
width :120},
{xtype:'label',
text: 'Category',
style:{"margin-left":"20px"}
},
new Ext.ux.form.SearchField({
width:130,store:ds,id:'search_field'
})

Condor
19 Jul 2010, 5:06 AM
Why not?

{
xtype: 'combo',
fieldLabel: 'Type',
displayField: 'name',
mode: 'local',
id: 'product',
name: 'product',
typeAhead: false,
store: mySimpleStore,
triggerAction: 'all',
allowBlank: true,
width: 120,
listeners: {
select: function(combo, record, index){
var f = Ext.getCmp('search_field');
f.store.setBaseParam('type', record.get('name'));
f.clear();
}
}
}, {
xtype: 'label',
text: 'Category',
style: {
"margin-left": "20px"
}
}, new Ext.ux.form.SearchField({
width: 130,
store: ds,
id: 'search_field'
})

pipiet06
19 Jul 2010, 6:40 PM
Hi Condor..

i have a form for search data..
all of the component form this form is the parameter for searching.



newhid.core.summary.form = Ext.extend(Ext.form.FormPanel,{
constructor : function(config){
config = config||{};
config.frame = config.frame || true;
config.autoHeight = config.autoHeight || true;
config.title = config.title || 'VIMS - Mstar Summary';
config.defaults = {width: 870, itemCls:'my-own-form-text'};
config.border = config.border || false;
newhid.core.summary.form.superclass.constructor.call(this,config);
}
,initComponent : function(){
Ext.apply(this, {
items:[{
layout:'column',
items:[{
columnWidth:.35,
labelWidth:100,
layout: 'form',
bodyStyle: 'padding: 5px 10px 0 0',
items: [
{
xtype: 'datefieldplus'
,fieldLabel: 'Date between*'
,id:'startdate'
,name: 'startdate'
// ,allowBlank: false
,width: 150
},
{
xtype: 'hidcombosite'
// xtype: 'textfield'
,fieldLabel: 'Site*'
,hiddenName: 'idsite'
// ,allowBlank: false
,width: 150
,listeners: {
'select': function(cmb, rec, idx){
site = Ext.getCmp('site_id').getValue();
fleet = Ext.getCmp('fleet_id');
fleet.clearValue();
fleet.store.load({
params:{'site_id': site}
});
Ext.getCmp('prefix_id').clearValue();
}
}
},
{
xtype: 'hidcombofleet'
// xtype: 'textfield'
,fieldLabel: 'Fleet*'
,hiddenName: 'idfleet'
// ,allowBlank: false
,width: 150
,listeners: {
'select': function(cmb, rec, idx){
site = Ext.getCmp('site_id').getValue();
fleet = Ext.getCmp('fleet_id').getValue();
prefix = Ext.getCmp('prefix_id');
prefix.clearValue();
prefix.store.load({
params:{'site_id': site,'fleet_id':fleet}
});
}
}
},
{
xtype: 'hidcombomultiprefix'
// xtype: 'textfield'
,hiddenName: 'idprefix'
,fieldLabel: 'Prefix*'
// ,allowBlank: false
,width: 150
},
]
},{
columnWidth:.35,
layout: 'form',
bodyStyle: 'padding: 5px 10px 0 0',
items: [
{
xtype:'datefieldplus'
,fieldLabel: 'and*'
,id: 'enddate'
,name: 'secondDate'
// ,allowBlank: false
,width: 150
},{
// xtype: 'hidcombomultieqplan'
xtype: 'textfield'
// ,hiddenName: 'eqplan'
,fieldLabel: 'Equipment Plan*'
// ,allowBlank: false
,width: 150
},{
xtype: 'combo'
// xtype: 'textfield'
// ,allowBlank: false
,fieldLabel: 'Category*'
,id: 'category'
,hiddenName: 'idcategory'
,width: 150
,emptyText: 'Select Category'
,store: new newhid.core.summary.catstore()
,mode: 'remote'
,triggerAction: 'all'
,valueField: 'idcategory'
,displayField: 'description'
},{
xtype:'hidcombotype'
// xtype: 'textfield'
,fieldLabel: 'Type*'
,multiSelect: true
// ,allowBlank: false
,width: 150
},
]
},{
columnWidth:.3,
layout: 'form',
bodyStyle: 'padding: 0px 20px 0 0',
items: [
{
xtype:'hidcombocomponentmixed'
// xtype: 'textfield'
,fieldLabel: 'Comp Code*'
,multiSelect: true
// ,allowBlank: false
,width: 150
},{
xtype: 'select'
// xtype: 'textfield'
// ,allowBlank: false
,fieldLabel: 'ID Event'
,id: 'idevent'
,hiddenName: 'summary'
,width: 150
,emptyText: 'Select ID Event'
,store: new newhid.core.summary.ideventstore()
,mode: 'local'
,triggerAction: 'all'
,valueField: 'summary'
,displayField: 'id'
,multiSelect: true
,forceSelection: true
,selectOnFocus: true
,hideTrigger: false
,typeAhead: true
},{
xtype: 'combo'
// xtype: 'textfield'
// ,allowBlank: false
,fieldLabel: 'Rating'
,id: 'idrating'
,hiddenName: 'rating'
,width: 150
,emptyText: 'Select Rating'
,store: rating
,mode: 'local'
,triggerAction: 'all'
}
]
}]
}],
buttons : [
{
text: 'Cancel'
,listeners: {
'click': {
scope: this
,fn: function(){
this.getForm().reset();
}
}
}
},
{
text: 'Apply'
,listeners: {
'click':{
scope: this
,fn: search_summary
}
}
}
]
});

function search_summary()
{
Ext.Ajax.request
({
url: newhid.core.summary.controller +'/get_data',
params: this.getForm().getValues(),
scope: this,
callback: function(options, success, response)
{
Ext.getCmp('summary_grid').getStore().reload();
alert('Status','Data Has Been Saved..');
}
});

}
newhid.core.summary.form.superclass.initComponent.apply(this, arguments);
}
});


so what can i do for "search"??


thanks before :)