PDA

View Full Version : Ext combo box



rajasekar
4 May 2011, 7:16 AM
Hi ,
I am using ext js auto complete combo box with label and id values, It is perfectly showing the label in front and getting id as a value.

But my problem is after selecting the label in combo box its showing the id field instead of label. Please view the code and image for reference.

For array sotre:
var ComboBoxName = new Ext.data.ArrayStore({
data : [['','']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});

Combo Box code:
var comboDest = new Ext.form.ComboBox({
store: ComboBoxName,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: 'Select DrugName',
forceSelection: false,
typeAhead: true,
selectOnFocus: true,
enableKeyEvents:true,
});

I am typing like this

http://ideamed.in/images/p1.png


But I am getting the view like this


http://ideamed.in/images/p3.png

Tim Toady
4 May 2011, 7:32 AM
Your grid will show the value of the selected item after you complete the edit. You need to use a renderer on that column to show what you want displayed.

jratcliff
4 May 2011, 6:18 PM
Check the docs for combbox. It has an example of how to do this (I'll post the example here as well).



// create reusable renderer
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}

// create the combo instance
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'myId',
'displayText'
],
data: [[1, 'item1'], [2, 'item2']]
}),
valueField: 'myId',
displayField: 'displayText'
});

// snippet of column model used within grid
var cm = new Ext.grid.ColumnModel([{
...
},{
header: "Some Header",
dataIndex: 'whatever',
width: 130,
editor: combo, // specify reference to combo instance
renderer: Ext.util.Format.comboRenderer(combo) // pass combo instance to reusable renderer
},
...
]);

rajasekar
5 May 2011, 3:16 AM
Hi Tim/jratcliff,

renderer will help us to get the value while displaying the grid, But my problem is after select the combo box in the grid row. Immediately it showing the id instead of showing the display value.

I have created on sample grid using grid code, please have a look.

edit-grid.js

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){


var sm = new Ext.grid.CheckboxSelectionModel({

});

var lightCombo = new Ext.data.ArrayStore({
data : [['1','Rambutan'],['2','Jackfruit'],['3','Passion Fruit'],['4','Lychee'],['5','Star fruit'],['6','Mangosteen'],['7','Kumquat'],['8','Mango'],['9','Apple'],['10','Orange']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});

var fightCombo = new Ext.data.ArrayStore({
data : [['1','Bison'],['2','Bengal Tiger'],['3','Blackbuck Antelope'],['4','Black Bear'],['5','Black-footed Ferrets'],['6','Bobcat'],['7','Bull Musk Ox'],['8','Caracal'],['9','Caribou'],['10','Cheetah']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});

var mightCombo = new Ext.data.ArrayStore({
data : [['1','Banyan Tree'],['2','Peepal Tree'],['3','Neem Tree'],['4','Garden Asparagus'],['5','Arjuna Tree'],['6','Aloe Vera'],['7','Tulsi Plant'],['8','Amla Plant'],['9','Ashwagandha'],['10','Brahmi']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});

var tightCombo = new Ext.data.ArrayStore({
data : [['1','PHP'],['2','C#'],['3','AJAX'],['4','JavaScript'],['5','Perl'],['6','C'],['7','Ruby on Rails'],['8','Java'],['9','Python'],['10','VB.Net']],
fields: ['id','displayValue'],
sortInfo: {
field: 'displayValue',
direction: 'ASC'
}
});

var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{
id: 'light',
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
store: lightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false,
})

},{
id:'fight',
header: 'fight',
dataIndex: 'fight',
width: 130,
editor: new Ext.form.ComboBox({
store: fightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false,
})

},{
id:'might',
header: 'might',
dataIndex: 'might',
width: 130,
editor: new Ext.form.ComboBox({
store: mightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false,
})

},{
id:'tight',
header: 'tight',
dataIndex: 'tight',
width: 130,
editor: new Ext.form.ComboBox({
store: tightCombo,
displayField:'displayValue',
valueField: 'id',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: '',
typeAhead: false,
})

}
]
});

var store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: [
{name: 'light'},
{name: 'fight'},
{name: 'might'},
{name: 'tight'}
]
}),
});

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,

renderTo: 'editor-grid',
width: 700,
height: 300,
title: 'Edit Plants?',
frame: true,
sm: sm,
clicksToEdit: 1,
});
initialRowCreation();
function initialRowCreation(){
var Plant = grid.getStore().recordType;

var p = new Plant({
light: '',
fight: '',
might: '',
tight: ''
});
grid.stopEditing();
store.insert(0, p);
grid.getView().refresh();
grid.startEditing(0, 0);

}
});

edit-grid.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="edit-grid.js"></script>
</head>
<body>
<div id="editor-grid"></div>
</body>
</html>

selecting the grid
http://www.ideamed.in/images/sam3.png

displaying id
http://www.ideamed.in/images/sam4.png

Tim Toady
5 May 2011, 4:34 AM
The renderer will be called after you set the value. It is not something that is only called when the grid first loads. The image you are showing is the correct behavior for a column with a combobox and no renderer.

rajasekar
6 May 2011, 3:29 AM
Hi Tim,

Its working fine,

Thanks a lot.

Regards,
Rajasekar