PDA

View Full Version : combo with search and button-reusable



mayurid
3 Aug 2010, 2:11 AM
hi all,

please help me with this.

i want to use the combo box with the search option and a button which opens a window ,many times in my project.so i want to put that in a file and just include it where i want.i did it perfectly now i want some options to be common and some options to be specific while doing this.for example in combo with search the URl option i want it to be specific to where i am using it. how can i do it.i want it just like the xtype we use by specifying some options and some are default.please help its quiet strange but please help
using that config

,items:[Example.comboConfig
,Example.buttonConfig ]implementation[HTML] Ext.ns('Example');

Example.comboConfig = {
xtype:'combo'

// we need id to focus this field. See window::defaultButton
,id:'combo'

// we want to submit id, not text
,valueField:'id'
,hiddenName:'id'

// could be undefined as we use custom template
,displayField:'team_name'

// query all records on trigger click
,triggerAction:'all'

// minimum characters to start the search
,minChars:2

// do not allow arbitrary values
,forceSelection:true

// otherwise we will not receive key events
,enableKeyEvents:true

// let's use paging combo
,pageSize:5

// make the drop down list resizable
,resizable:true

// we need wider list for paging toolbar
,minListWidth:220

// force user to fill something
,allowBlank:true

// store getting items from server
,store:new Ext.data.JsonStore({
id:'id'
,root:'results'
,totalProperty:'total'
,fields:[
{name:'id', type:'int'}
,{name:'team_name', type:'string'}

]
,url:'gl_combo.php'

,baseParams:{task:'list'

}
})

// concatenate last and first names
,tpl:'<tpl for="."><div class="x-combo-list-item">{team_name}</div></tpl>'

// listeners
,listeners:{
// sets raw value to concatenated last and first names
select:function(combo, record, index) {
this.setRawValue(record.get('team_name') );
}

// repair raw value after blur
,blur:function() {
var val = this.getRawValue();
this.setRawValue.defer(1, [val]);
}

// set tooltip and validate
,render:function() {
this.el.set(
{qtip:'Type at least ' + this.minChars + ' characters to search in last name'}
);
this.validate();
}

// requery if field is cleared by typing
,keypress:{buffer:100, fn:function() {
if(!this.getRawValue()) {
this.doQuery('', true);
}
%7

Condor
3 Aug 2010, 2:40 AM
Your method doesn't work when complex properties are used (store, listeners).

Either create a custom component or a factory method.

A factory method is the easiest solution:

Example.getComboConfig = function(){
return {
xtype: 'combo',
...
};
}

mayurid
3 Aug 2010, 2:47 AM
@condor
i tried its working fine,but some options i want them to be specified when they are used so how do i do that,i mean the config options .like example: store,url etc

Condor
3 Aug 2010, 6:03 AM
So you want:

Example.getComboConfig = function(config){
return Ext.apply({
xtype: 'combo',
...
}, config);
}

christian130
3 Aug 2010, 9:26 AM
Modestly, (i'm not an expert but i wanna help in some kind ) have u checked THIS EXAMPLE (http://www.sencha.com/deploy/dev/examples/grid/grouping.html)
have luck!

mayurid
3 Aug 2010, 8:58 PM
@condor
i want some options to be specific to where i am using,so when i am trying to declare them when i want they are not working,only the options which i specified in function are working.

Ext.ns('Example');

Example.getComboConfig = function (config) {
return Ext.apply({
xtype: 'combo' // we need id to focus this field. See window::defaultButton
,
id: 'combo'

// we want to submit id, not text
,
valueField: 'id',
hiddenName: 'id'

// could be undefined as we use custom template
//,displayField:'team_name'
// query all records on trigger click
,
triggerAction: 'all'

// minimum characters to start the search
,
minChars: 2

// do not allow arbitrary values
,
forceSelection: true

// otherwise we will not receive key events
,
enableKeyEvents: true

// let's use paging combo
,
pageSize: 5

// make the drop down list resizable
,
resizable: true

// we need wider list for paging toolbar
,
minListWidth: 220

// force user to fill something
,
allowBlank: true,
tpl: '<tpl for="."><div class="x-combo-list-item">{team_name}</div></tpl>'

// listeners
,
listeners: {
// sets raw value to concatenated last and first names
select: function (combo, record, index) {
this.setRawValue(record.get('team_name'));
}

// repair raw value after blur
,
blur: function () {
var val = this.getRawValue();
this.setRawValue.defer(1, [val]);
}

// set tooltip and validate
,
render: function () {
this.el.set({
qtip: 'Type at least ' + this.minChars + ' characters to search in last name'
});
this.validate();
}

// requery if field is cleared by typing
,
keypress: {
buffer: 100,
fn: function () {
if (!this.getRawValue()) {
this.doQuery('', true);
}
}
}
}

// label
,
fieldLabel: 'Teams'
}, config);
}Implementation Code:when i declare the store here it wont work

var myfirstpanel = Example.getComboConfig({
title: 'My First Panel',
displayField: 'team_name'

,
store: new Ext.data.JsonStore({
id: 'id',
root: 'results',
totalProperty: 'total',
fields: [{
name: 'id',
type: 'int'
},
{
name: 'team_name',
type: 'string'
}

],
url: 'gl_combo.php',
baseParams: {
task: 'list'

}
})Declaration:

,items:[myfirstpanel
]

Condor
3 Aug 2010, 11:05 PM
Why wouldn't that work?

ps. Your code indentation is horrible. Do you know jsbeautifier (http://www.jsbeautifier.org/)?.

mayurid
3 Aug 2010, 11:10 PM
@sorry condor...its was not working but its working fine now thank you so much...

mayurid
3 Aug 2010, 11:27 PM
@condor
i want to have one button type to be specified with in that one function,is it possible?

Condor
3 Aug 2010, 11:31 PM
i want to have one button type to be specified with in that one function,is it possible?

Can you explain?

mayurid
3 Aug 2010, 11:37 PM
i have defined a combo box in the Example.getComboConfig factory function is it posssible to define a button in that i mean i want to have a combo box and a button together

Condor
3 Aug 2010, 11:48 PM
In that case your factory method should record a container that holds both the combobox and the button.

or are you looking for a TwinTriggerCombo (http://www.sencha.com/forum/showthread.php?12984-Feature-Request-Clearable-ComboBox&p=232225#post232225)?

mayurid
4 Aug 2010, 12:37 AM
In that case your factory method should record a container that holds both the combobox and the button.

or are you looking for a TwinTriggerCombo (http://www.sencha.com/forum/showthread.php?12984-Feature-Request-Clearable-ComboBox&p=232225#post232225)?
ya i want a component to have both button and combo box. together is it posssible?

mayurid
4 Aug 2010, 1:33 AM
ya your right i want a factory method should record a container that holds both the combobox and the button.how to do it?

Condor
4 Aug 2010, 1:39 AM
Something like:

function getComboWithButton(comboConfig, buttonConfig){
return {
xtype: 'container',
layout: 'hbox',
items: [
Ext.apply({
xtype: 'combo',
...
}, comboConfig),
Ext.apply({
xtype: 'button',
...
}, buttonConfig)
]
};
}

mayurid
4 Aug 2010, 1:51 AM
Your a genius....thanks very much...its perfect..

mayurid
4 Aug 2010, 2:57 AM
sorry to trouble you,one last thing i want to know.
how to use this function,i mean the config for combo and button are different so when i use if i need to set options to both items separately
currently i did like this if i want to set options for both than how i need to do
var myfirstpanel = getComboWithButton(
{

displayField: 'team_name'

,
store: new Ext.data.JsonStore(
{
id: 'id',
root: 'results',
totalProperty: 'total',
fields: [
{
name: 'id',
type: 'int'},
{
name: 'team_name',
type: 'string'}

],
url: 'gl_combo.php',
baseParams: {
task: 'list'

},
listeners: {
// sets raw value to concatenated last and first names
select: function (combo, record, index)
{
this.setRawValue(record.get('team_name'));
}
}
})//here i need to add config for button also how do i differenciate

});

Condor
4 Aug 2010, 3:00 AM
The method has 2 parameters, so it would be:

getComboWithButton({
// config for combobox
},{
// config for button
})

mayurid
4 Aug 2010, 4:07 AM
21785
@condor

1.As you can see in image,there is a grid in window,that window pops up when the button is clicked,it is the factory method that is calling the button and the combo together, now i want that when the grid's particular value is clicked that value should come into the combo box,the combo box.the combo box uses remote store.

2.2nd issue is the button click is working only once i mean,if i cllick once the window pops up if i close the window and click the button once again nothing happens(the window does not pop up)

Condor
4 Aug 2010, 4:11 AM
1. You need to set the value of the combobox after the combobox store is loaded.
2. Are you hiding and reusing the window or are you closing and recreating it?

mayurid
4 Aug 2010, 4:18 AM
1. ya i got that but how to do that?
2.i am using window.show() and its closable.

Condor
4 Aug 2010, 4:26 AM
1. This override (http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store&p=400274#post400274) might be useful to you. And you need a reference to the combobox.
2. Is the hideMode set to 'close' (default) or 'hide'?

mayurid
4 Aug 2010, 5:14 AM
1. This override (http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store&p=400274#post400274) might be useful to you. And you need a reference to the combobox.
2. Is the hideMode set to 'close' (default) or 'hide'?
1.how to select the field from grid i dont have an idea.
2.hideMode i set to hide but its not working.

mayurid
4 Aug 2010, 5:35 AM
1.i used the following to get the value of grid

register_list.on("rowdblclick", function(register_list) { ..i dont know how to catch that particular value i have overided the combo... });

2.i set the hideMode to hide its not working

Condor
4 Aug 2010, 5:47 AM
I could explain all this, but it seems you are just missing to much basic knowledge. Maybe you should read some tutorials or buy a good book (I recommend Ext JS in Action).

mayurid
4 Aug 2010, 5:52 AM
Actually i am new to ext which tutorial should i go through to get the concept of what i am doing,i don't have enough time to read book and implement as i am working..
" i had implemented the same thing i.e taking value from grid in different window to html combo box."using

listeners: {
rowselect: function (sm, row, rec)
{
self.opener.document.getElementById('team_select_id').value = teamgrid.getSelectionModel().getSelected().get('team_id');
self.opener.document.getElementById('team_select_name').value = teamgrid.getSelectionModel().getSelected().get('team_name');
window.close();
}
please help

Condor
4 Aug 2010, 6:09 AM
So you want something like:

rowdblclick: function(grid, row, e){
var rec = grid.getStore().getAt(row);
var win = getCmp('id-of-window');
if (!win) {
win = new Ext.Window({
id: 'id-of-window',
...
closeable: true,
closeAction: 'hide'
});
}
win.show();
var combo = win.find('itemId', 'itemId-of-combobox');
combo.setValue(rec.get('fieldname'));
}

mayurid
4 Aug 2010, 9:00 PM
actually u dint get me i think,in my implementation there is a window in which i am calling that factory function in items,so in that there is a combo box,and a button the combo performs the search and the button when clicked opens a window which contains a grid now my requirement is that when the user clicks the grid value that value should come in the combo box.
Ext.onReady(function () {

Ext.QuickTips.init();
var register_list_store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'gl_combo.php',
method: 'POST',
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id',
fields: ['team_name']
}),
baseParams: {
task: 'list'
}
});
register_list_store.load();
var colModel = new Ext.grid.ColumnModel([{

header: 'Name',
sortable: true,
dataIndex: 'team_name'
},

])
var register_list = new Ext.grid.GridPanel({
layout: 'fit',
store: register_list_store,
loadMask: true,

cm: colModel,
width: '100%',
stripeRows: false,
height: 450,
title: 'Members',
border: true,

bbar: new Ext.PagingToolbar({
store: register_list_store,
pageSize: 4,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowdblclick: function (grid, row, e) {here i need to select that particular item and set into the combo }
}
}),
})



var myfirstpanel = getComboWithButton({

displayField: 'team_name'

,
store: new Ext.data.JsonStore({
id: 'id',
root: 'results',
totalProperty: 'total',
fields: [{
name: 'id',
type: 'int'
},
{
name: 'team_name',
type: 'string'
}

],
url: 'gl_combo.php',
baseParams: {
task: 'search'

},
listeners: {
// sets raw value to concatenated last and first names
select: function (combo, record, index) {
this.setRawValue(record.get('team_name'));
}
}
})

}, {
text: 'select',
handler: function (button, evt) {
new Ext.Window({
x: 150,
y: 150,
title: 'GRID',
id: 'helpwin',
width: 200,
height: 200,
hideMode: 'display',
closable: false,
closeAction: 'hide',

items: [register_list]

}).show();

}
});
Ext.form.Field.prototype.msgTarget = 'side';
var win = new Ext.Window({
id: 'combo-win'
// ,title:Ext.fly('page-title').dom.innerHTML
,
layout: 'fit',
width: 300,
height: 150,
closable: false,
border: false
// let window code to focus the combo on show
,
defaultButton: 'combo',
items: {
xtype: 'form',
frame: true,
defaults: {
anchor: '-50'
},
items: [myfirstpanel]
}
});
win.show();


});
in remote store i am using

listeners: {
// sets raw value to concatenated last and first names
select: function (combo, record, index)
{// sets raw value
this.setRawValue(record.get('team_name'));
}
}

mayurid
4 Aug 2010, 10:18 PM
So you want something like:

rowdblclick: function(grid, row, e){
var rec = grid.getStore().getAt(row);
var win = getCmp('id-of-window');
if (!win) {
win = new Ext.Window({
...
closeable: true,
closeAction: 'hide'
});
}
win.show();
var combo = win.find('itemId', 'itemId-of-combobox');
combo.setValue(rec.get('fieldname'));
}




var combo = win.find('itemId', 'itemId-of-combobox');
combo.setValue(rec.get('fieldname'));itemId,itemId-of-combobox,fieldname will be what i am not getting because it is defined in factory function

Condor
4 Aug 2010, 11:19 PM
In that case you should create a 'setValue' method in your window (your window is supposed to know how to set the value of its own combobox).

mayurid
4 Aug 2010, 11:27 PM
in which case ?i mean i posted two replies for which your saying i dint get?

when i tried to alert the itemId it shows nothing,itemId-of-combobox its showing object html element

Condor
4 Aug 2010, 11:31 PM
The example assumed that you configured the combobox with: itemId:'itemId-of-combobox' and that the grid contained a field named: 'fieldname'.

mayurid
5 Aug 2010, 12:26 AM
In that case you should create a 'setValue' method in your window (your window is supposed to know how to set the value of its own combobox).

You mean to override the combo box?something like the example given in FAQ combo box or its different.

Condor
5 Aug 2010, 12:32 AM
No, I meant:

function getMyWin(){
var win = Ext.getCmp('my-win');
if (!win){
var combo = new Ext.form.ComboBox({...});
win = new Ext.form.Window({
id: 'my-win',
closable: true,
closeAction: 'hide',
...
items: [combo],
setValue: function(v){
combo.setValue(v);
}
});
win.render(Ext.getBody());
}
return win;
}

That way you can use:

var win = getMyWin();
win.setValue(123);
win.show();

mayurid
5 Aug 2010, 12:58 AM
@ condor


1.the combo box that i am using is defined in factory function,how can i declare in function once again.
2.function should be decalared in grids listener? or outside, both its not working
var combo = win.find('p1','id_com');// is there alternative to get the combo box from the window,this is not working everything else is working

Condor
5 Aug 2010, 2:39 AM
I'm not exactly how you are trying to build this. Can you post your current code?

mayurid
5 Aug 2010, 5:02 AM
I'm not exactly how you are trying to build this. Can you post your current code?

@condor

Ext.onReady(function () {

Ext.QuickTips.init();


var myfirstpanel = getComboWithButton({
itemId: 'p1',
name: 'team_name',
displayField: 'team_name',
id: 'id_com',
store: new Ext.data.JsonStore({
id: 'id',
root: 'results',
totalProperty: 'total',
fields: [{
name: 'id2',
type: 'int'
},
{
name: 'team_name',
type: 'string'
}],
url: 'gl_combo.php',
baseParams: {
task: 'search'
},
listeners: {
select: function (combo, record, index) {
this.setRawValue(record.get('team_name'));
}
}
})
}, {
itemId: 'p2',
text: 'select',
id: 'but_id'

});
Ext.form.Field.prototype.msgTarget = 'side';
var win = new Ext.Window({
id: 'combo-win',
name:'combo-win',
layout: 'fit',
width: 300,
height: 150,
closable: false,
border: false,
defaultButton: 'combo',
items: {
xtype: 'form',
frame: true,
defaults: {
anchor: '-50'
},
items: [myfirstpanel]
}
});
win.show();
});Factory method:-

Ext.ns('Example');

var team_list_store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'gl_combo.php',
method: 'POST',
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id_team_store',
fields: ['team_name']
}),
baseParams: {
task: 'list'
}
});
var colModel = new Ext.grid.ColumnModel([{

header: 'Name',
sortable: true,
//
dataIndex: 'team_name'
}, ])
var team_list = new Ext.grid.GridPanel({
layout: 'fit',
store: team_list_store,
loadMask: true,
id: 'gridId',
cm: colModel,
width: '100%',
stripeRows: false,
height: 450,
title: 'Members',
border: true,
bbar: new Ext.PagingToolbar({
store: team_list_store,
pageSize: 4,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
singleSelect: true,
listeners: {
rowdblclick: function (grid, row, e) {
var team_record = grid.getStore().getAt(row);
win = Ext.getCmp('combo-win');

var combo = win.find('p1', 'comboId');
//alert('omboId');
combo.setValue(team_record.get('team_name'));
}
}
});
team_list_store.load();

function getComboWithButton(comboConfig, buttonConfig) {
return {
xtype: 'container',
layout: 'hbox',
items: [
Ext.apply({
xtype: 'combo',
valueField: 'team_name',
hiddenName: 'id',
triggerAction: 'all',
minChars: 2,
forceSelection: true,
enableKeyEvents: true,
pageSize: 5,
resizable: true,
minListWidth: 220,
allowBlank: true,
tpl: '<tpl for="."><div class="x-combo-list-item">{team_name}</div></tpl>',
listeners: {
blur: function () {
var val = this.getRawValue();
this.setRawValue.defer(1, [val]);
},
render: function () {
this.el.set({
qtip: 'Type at least ' + this.minChars + ' characters to search '
});
this.validate();
},
keypress: {
buffer: 100,
fn: function () {
if (!this.getRawValue()) {
this.doQuery('', true);
}
}
}
},
fieldLabel: 'Teams'

}, comboConfig), Ext.apply({
xtype: 'button',
autoWidth: true,
text: 'Select',
handler: function (button, evt) {
var window_gird = new Ext.Window({
x: 150,
y: 150,
store: team_list_store,
title: 'GRID',
id: 'helpwin',
width: 200,
height: 400,
hideMode: 'display',
closeable: true,
closeAction: 'hide',
items: [team_list]

}).show();
}

}, buttonConfig)]
};
}

mayurid
6 Aug 2010, 12:59 AM
I'm not exactly how you are trying to build this. Can you post your current code?

i posted my current code..please help

Condor
6 Aug 2010, 1:28 AM
You are configuring the combobox with id:'id_com', so you can simply use:

Ext.getCmp('id_com').setValue(someValue);
(no need for itemIds etc. - but you have to make sure you use unique ids)

mayurid
6 Aug 2010, 3:14 AM
21823
You are configuring the combobox with id:'id_com', so you can simply use:

Ext.getCmp('id_com').setValue(someValue);(no need for itemIds etc. - but you have to make sure you use unique ids)
its working condor..
i have 2issues:
1.when i open that window and close it, and again if i open it blank window is opening.
2.i want the store to load when the window is opened(button is clicked to open the window).

Condor
6 Aug 2010, 3:17 AM
Closing a window will destroy all content. You problably want to hide and reuse the window instead of recreate it every time, e.g.


var win = Ext.getCmp('id-of-window');
if (!win) {
win = new Ext.Window({
id: 'id-of-window',
closable: true,
closeAction: 'hide',
...
});
}
win.show();

mayurid
6 Aug 2010, 11:11 PM
@condor
thanks for the help condor..


while implementing the factory method twice i.e i called the method twice its not working,when i open the grid and select the value to store in the combo it store in one of the combo because i am calling by using 'id' and setting the value

listeners: {
rowdblclick: function (grid, row, e) {
var team_record = grid.getStore().getAt(row);
var team_name_grid = team_record.get('team_name')
win = Ext.getCmp('help_team_win');
Ext.getCmp('id_com').setValue(team_name_grid);Getting combo value by id and setting grid value in it.
win.hide();

}


Ext.ns('Example');

var team_list_store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'gl_combo.php'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id_team_store'},
[ {name: 'team_name',type: 'string'}]
),
baseParams: {task:'list'}


});
team_list_store.load();

function getComboWithButton(comboConfig, buttonConfig) {
return {
xtype: 'container',
layout: 'hbox',
items: [
Ext.apply({
xtype: 'combo',
valueField: 'team_name',
hiddenName: 'id',
triggerAction: 'all',
minChars: 2,
forceSelection: true,
enableKeyEvents: true,
pageSize: 5,
resizable: true,
minListWidth: 220,
allowBlank: true,
tpl: '<tpl for="."><div class="x-combo-list-item">{team_name}</div></tpl>',
listeners: {
blur: function () {
var val = this.getRawValue();
this.setRawValue.defer(1, [val]);
},
render: function () {
this.el.set({
qtip: 'Type at least ' + this.minChars + ' characters to search '
});
this.validate();
},
keypress: {
buffer: 100,
fn: function () {
if (!this.getRawValue()) {
this.doQuery('', true);
}
}
}
},
fieldLabel: 'Teams'
}, comboConfig), Ext.apply({
xtype: 'button',
autoWidth: true,
text: 'Select',
tooltip: 'Select to Search From Grid ',
handler: function (button, evt) {
var win = Ext.getCmp('help_team_win');
if (!win) {
win = new Ext.Window({
id: 'help_team_win',
closable: true,
x: 250,
y: 150,
closeAction: 'hide',
title: 'GRID',
width: 300,
height: 300,
items: [{
style: {
'margin-top': '10px'
},
items: team_list}]
});
}
win.show();
}
}, buttonConfig)]
};
}
var colModel = new Ext.grid.ColumnModel([{

header: 'Name',
sortable: true,
dataIndex: 'team_name'
}, ])
var team_list = new Ext.grid.GridPanel({
layout: 'fit',
store: team_list_store,
loadMask: true,
id: 'gridId',
cm: colModel,
width: '100%',
stripeRows: false,
height: 450,
title: 'Teams',
border: true,
tbar: [{xtype:'label',text:'Team'},{
xtype: 'textfield',
fieldLabel: 'Team Name',
width: 80,
name: 'team_name_grid_text',
id: 'team_name_grid_text',
allowBlank: false
},{xtype: 'button',
text: 'Search',
tooltip: 'Search From Grid ',
width: 80,
id: 'search_team',
handler: function () {team_list_store.baseParams.team_name_grid_text=document.getElementById('team_name_grid_text').value;
team_list_store.baseParams.task = 'search_team';
team_list_store.load({params:{task:'search_team',team_name_grid_text:document.getElementById('team_name_grid_text').value}});
}
}
],
bbar: new Ext.PagingToolbar({
store: team_list_store,
pageSize: 4,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
singleSelect: true,
listeners: {
rowdblclick: function (grid, row, e) {
var team_record = grid.getStore().getAt(row);
var team_name_grid = team_record.get('team_name')

win = Ext.getCmp('help_team_win');
Ext.getCmp('id_com').setValue(team_name_grid);
win.hide();

}
}
});
21849Form where i am calling it:


Ext.onReady(function () {

Ext.QuickTips.init();

var myfirstpanel = getComboWithButton({
itemId: 'p1',
name: 'team_name',
displayField: 'team_name',hiddenName:'team_name',valueField:'team_name',

store: new Ext.data.JsonStore({
id: 'team_name_id',
root: 'results',
totalProperty: 'total',
fields: [{
name: 'id2',
type: 'int'
},
{
name: 'team_name',
type: 'string'
}],
url: 'gl_combo.php',
baseParams: {
task: 'search'
},
listeners: {
select: function (combo, record, index) {
this.setRawValue(record.get('team_name'));
}
}
})
}, {
itemId: 'p2',
text: 'select',
id: 'but_id'

});
var myfirstpanel2 = getComboWithButton({
itemId: 'p1',
name: 'team_name',valueField:'team_name',
hiddenName:'team_name',
displayField: 'team_name',

store: new Ext.data.JsonStore({
id: 'team_name',
root: 'results',
totalProperty: 'total',
fields: [{
name: 'id2',
type: 'int'
},
{
name: 'team_name',
type: 'string'
}],
url: 'gl_combo.php',
baseParams: {
to_do: 'search'
},
listeners: {
select: function (combo, record, index) {
this.setRawValue(record.get('team_name'));
}
}
})
}, {
itemId: 'button_id',
text: 'select',
id: 'button_id'

});
Ext.form.Field.prototype.msgTarget = 'side';
var simple = new Ext.FormPanel({

url: 'save-form.php',
frame: true,
title: 'Simple Form',
// bodyStyle:'padding:5px 5px 0',
width: 350,
// defaults: {width: 230},
// defaultType: 'textfield',
items: [{
xtype: 'label',
text: 'Name',
},

{
xtype: 'textfield',
label: 'First Name',
name: 'firstname',

id: 'firstname',
allowBlank: true},
{
xtype: 'label',
text: 'Last Name'},
{
xtype: 'textfield',
label: 'lastname',

name: 'lastname',
id: 'lastname'},{xtype:'label',text:'Teams'},myfirstpanel,myfirstpanel2,
{
xtype: 'button',

text: 'Save',
// , tooltip:{title:'Save Information', text:'Saves the changes then closes dialog.'}
// scope: this,
handler: function() {


simple.getForm().submit({
success: function(frm, act) {


},
failure: function(frm, act) {
Ext.MessageBox.hide();
Ext.example.msg('Error', 'Try Again');
}
});
},
id: 'save',
text: 'Save'},
{
xtype: 'button',
text: 'cancel'}


]
});

simple.render(document.body);



});
// win.show();

mayurid
10 Aug 2010, 11:14 PM
21890
one last issue i solved all the issues,thanks for your valuable help,in screen shot as u can see,i have implemented two factory functions,in 2 different files every thing is working correctly except one small problem.
when i open a window the grid is loaded as i have specified the store load in buttons handler,it loads perfectly but in one situation, example if i open both the windows i e two factory functions grids and if i close them and again open one of them the one which i close will open the store which is supposed to load but the contents of grid will be from other grid. how solve it please help

Condor
10 Aug 2010, 11:31 PM
It's probably best if you used two different windows, one for users and one for teams.

This would mean that you need to different getComboWithButton methods or that getComboWithButton needs a parameter with the window to display.

mayurid
17 Aug 2010, 9:47 PM
hey guys is there a solution to this or not


one last problem:
i want to set the value field and display field of combo from grid differently:

listeners: {

rowdblclick: function (grid, row) {
var win_user = grid.findParentByType('window'),//get value by parent type i e window
rec = grid.getStore().getAt(row);//get row value from grid
win_user.combo.setValue(rec.get('myusername'));//this is setting both value and display field
i want to set 'myuserid' as valueField in combo
win_user.hide();
}
}