PDA

View Full Version : Editor grid with combo



acharya
28 Jun 2010, 2:14 AM
In Editor grid with combobox as a column, the "down arrow" next to combo box is not visible until it is clicked and the combo expands.

Is it possible to show the down arrow all the time, so that the user can know that it is a combo box.

i.e. In extjs editor grid example, the column "Light" is a combo drop down. How can I show the down arrow next to "Mostly Shady" or "Shade"?

ahuerta
28 Sep 2010, 9:11 AM
I have the same case, why it doesnīt have an answer?

Animal
28 Sep 2010, 9:34 PM
What does the DOM of it look like?

ahuerta
29 Sep 2010, 6:52 AM
Hey hereīs the code, Iīm attaching an image illustrating what Iīm trying to achieve



colModel: new Ext.grid.ColumnModel({

defaults: {
sortable: true,
menuDisabled: true
,hidden: true
},
columns: [
{
header: "Actions"
,dataIndex: 'action'
,hidden: false
,editor: new Ext.form.ComboBox(
{
id: 'test-company-actionSelector',
name: 'company-action',
store: new Ext.data.SimpleStore({
fields: ['id','name'],
data: [
['companyMilestoneDetail', 'Work Flow Detail']
,
['companyFamilyContacts', 'Family Contacts']
,
['companyNotes','Notes']
,
['companyMessaging','Messaging']
]
,autoLoad: true
}),
displayField: 'name',
valueField: 'name',
value: 'Select an Action',
editable: false,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select an Action',
selectFocus: true,
listeners : {
beforeRender: function(e) {
e.gridEditor.value = "Select an Action"
e.setValue("Select an Action");
},

Animal
29 Sep 2010, 7:53 AM
It's working.

ahuerta
29 Sep 2010, 7:58 AM
When the pages load Iīm not able to see the down arrows on each record, the image is manipulated to show the desired functionality but the user doesnīt have a clear idea that the Action column is a combo box unless it has a small arrow icon fo each record.

Dark Assassin
29 Sep 2010, 8:08 AM
working me too....just try to create the combo out of the grid and see if you get the same problem.
Then i suggest to try some different browser like FF or Chrome!

Animal
29 Sep 2010, 9:51 AM
When the pages load Iīm not able to see the down arrows on each record, the image is manipulated to show the desired functionality but the user doesnīt have a clear idea that the Action column is a combo box unless it has a small arrow icon fo each record.

Yes. It's working. There is ONLY ONE COMBO!

ahuerta
29 Sep 2010, 10:08 AM
I donīt get it, the editable grid has a lot of records (rows) and each row itīs a combo box. The small arrow itīs not showing in any record and thatīs what I want. Display by default the drop drown arrow when the page loads and in every record (combobox).

Animal
29 Sep 2010, 11:11 AM
For the last time, there is only one combo box. You can SEE that there is. You create ONE. For the whole column.

mkm_2013
22 Aug 2013, 6:16 AM
var combo=new Ext.form.ComboBox({
id:'probTypeCombo',
typeAhead : true,
lazyRender : true,
record:rclRecord,
layout:'column',
hideTrigger:false,
mode:'local',
listClass: 'x-combo-list-small',
store: new Ext.data.ArrayStore({
fields:['inputVal','name'],
data :[['clinic','clinic'],['RCL','RCL'],['NA*','NA*']]

}),
valueField: 'inputVal',
displayField:'name',
triggerAction :'all',
emptyText :"Select ProbType"
})
var colModel = new Ext.grid.ColumnModel([
{header:'CT Number', width:95, sortable:true, dataIndex:'specId', type:'string'},
{header:'CT Number', width:95, sortable:true, dataIndex:'id', type:'string'},
{header:'Series Number', width:65, sortable:false, dataIndex:'series50'},
{header:'Seq Number', width:65, sortable:false, dataIndex:'seq50'},
{header:'Image Count', width:65, sortable:false, dataIndex:'count50'},
{header:'Series Number', width:65, sortable:true, dataIndex:'series51'},
{header:'Seq Number', width:60, sortable:false, dataIndex:'seq51'},
{header:'Image Count', width:65, sortable:false, dataIndex:'count51'},
{ header :'Problem Source',
dataIndex:'probType' ,
width:150,
editor : combo,
listClass :'x-combo-list-small',

},

{header:'Problem Discrepation',autoScroll: true,width:100,height:50,dataIndex:'probDesc',
editor : new Ext.form.TextArea({
allowBlank: true
})
}


]);
var discrepancyGrid = new Ext.grid.EditorGridPanel({
renderTo:'manage-discrepancies',
width:1000,
height:550,
id:'discrepancyGrid',
enableColumnMove:false,
stripeRows:true,
frame:true,
enableHdMenu:false,
store:rclDiscrepancystore,
cm:colModel,
// sm:rbsm,
title:'Manage Discrepancies',
clicksToEdit:1,

loadMask:true,
// autoExpandColumn:'edit',
tbar:[
{
xtype:'tbfill'
},
new Ext.Toolbar.TextItem('Search: '),
{
xtype:'trigger',
name:'field-search',
width:200,
emptyText:'Enter Subject ID',
triggerClass:'x-form-search-trigger',
listeners:{
'specialkey':function (ff, e) {
if (e.getKey() == e.ENTER) {
searchString = this.getValue();
rclDiscrepancystore.setBaseParam('search', searchString);
rclDiscrepancystore.load({
params:{
start:0,
limit:15,
search:searchString
}
});
}
}
},
onTriggerClick:function (val) {
searchString = this.getValue();
rclDiscrepancystore.setBaseParam('search', searchString);
rclDiscrepancystore.load({
params:{
start:0,
limit:15,
search:searchString
}
});
}
},
{


xtype:'tbfill',
items:[{
xtype:'tbfill',
header:'Clinical Center Reported'
},
{
xtype:'tbfill',
header:'Radiology Core Lab Reported'
}]


}],

bbar:DiscrepancyPager,
buttons: [{
text: 'Submit',
// iconCls: 'submit',
handler: function () {
var cbs = document.getElementsByTagName('input');
// alert(cbs.length);
var moduleNameFlag = new Array();
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].name.indexOf("priv_") >= 0) {
// alert("name: " + cbs[i].name.indexOf("_") +
// cbs[i].checked);
moduleNameFlag[i] = cbs[i].name + "=" + cbs[i].checked;


}


}
var params = {};
params.moduleNameFlag = moduleNameFlag;
params.roleId = roleid;
// params.userAction = 'edit';
Ext.Ajax.request({
url: '/stdy/admin/roles/module/servlet/moduleController.do',
params: params,
disableCaching: true,
callback: function (opt, ok, resp) {
if (ok == true) {
Ext.Msg.show({
title: 'Manage Module Roles',
msg: "Transaction Completed Successfully.",
width: 400,
buttons: {
ok: 'OK'
}
});


dataStore.reload();
} else {
ajaxError(resp);
}
}
});
}


}]
});
discrepancyGrid.render() ;

search=searchString;
var newpage = new Number(thisRCLDisPage).valueOf();
rclDiscrepancystore.setBaseParam('start', (newpage - 1) * 15);
rclDiscrepancystore.setBaseParam('limit', 15);
rclDiscrepancystore.setBaseParam('search', searchString);
rclDiscrepancystore.load();

nrimarriage
26 Aug 2013, 3:19 AM
I have also the same case, why it doesnīt have an answer?

Marriage Bureau (http://www.nrimb.com)