Geek Answers Handbook

In ExtJs 3.3.1, how can I disable ComboBox without clicking in EditorGrid?

I am using ExtJs 3.3.1.

In the Editor, my “editable” column has a ComboBox in its editor. How can I show ComboBox for each row? This means that the user would not have to click on the cell to know that there is a ComboBox. I currently have clicksToEdit set to 1, but I would like to set this to 0 (I tried this).

To see my current configuration, see some of my codes below.

var combo = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', lazyRender: true, mode: 'local', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'statusId', 'displayText'], data: data }), valueField: 'statusId', displayField: 'displayText' }); var cm = new Ext.grid.ColumnModel({ columns: [{ id: 'orderId', header: 'ID', dataIndex: 'id', width: 50 }, { header: 'Status', dataIndex: 'status', width: 130, editor: (data.length == 1) ? null : combo, renderer: Ext.util.Format.comboRenderer(combo) }, { id: 'orderSummary', header: 'Summary', dataIndex: 'summary', renderer: this.renderSummary }] }); var orderGrid = new Ext.grid.EditorGridPanel({ store: this.getOrderStore(), cm: cm, autoExpandColumn: 'orderSummary', clicksToEdit: 1 });
+4
source share
2 answers

Here is the solution I came up with.

  • In my column model, I made sure that the column that I am making "editable" has an identifier. Each cell in this column will now have an associated CSS class named "x-grid-col- {id}". My column id is “status”, so the class is “x-grid-col-status”.

  • I created CSS for the class "x-grid-col-status", which sets the drop-down arrow image as the background, aligned to the right. It also sets the cursor on the pointer, so the user knows that he can click on the cell.

     .x-grid3-col-status { background-image: url(Image/trigger-single.gif); background-position: right; background-repeat: no-repeat; cursor: pointer; }

  • Next, I created a listener for my ComboBox that listens for the "focus" event. In focus, I am expanding the drop-down list. It is important that I have to add lazyInit: false to my ComboBox configuration, otherwise an empty list will appear when expanding. lazyInit - true to not initialize the list for this combination until the field is focused (the default value is true)

Code:

  Ext.util.Format.comboRenderer = function (combo) { return function (value, metaData, record, rowIndex, colIndex, store) { var record = combo.findRecord(combo.valueField, value); return record ? record.get(combo.displayField) : combo.valueNotFoundText; } } var combo = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', lazyInit: false, lazyRender: true, mode: 'local', editable: false, store: new Ext.data.ArrayStore({ id: 0, fields: [ 'statusId', 'displayText' ], data: data }), valueField: 'statusId', displayField: 'displayText', listeners: { 'focus': { fn: function (comboField) { comboField.doQuery(comboField.allQuery, true); comboField.expand(); } , scope: this } , 'select': { fn: function (comboField, record, index) { comboField.fireEvent('blur'); } , scope: this } } }); var cm = new Ext.grid.ColumnModel({ defaults: { sortable: true }, columns: [ { id: 'orderId', header: 'ID', dataIndex: 'id', width: 50 }, { header: 'Status', id: 'status', dataIndex: 'status', width: comboColumnWidth, editor: combo, renderer: Ext.util.Format.comboRenderer(combo) }, { id: 'orderSummary', header: 'Summary', dataIndex: 'summary', renderer: this.renderSummary } ] }); var orderGrid = new Ext.grid.EditorGridPanel({ store: this.getOrderStore(), cm: cm, autoExpandColumn: 'orderSummary', title: title, clicksToEdit: 1 });
+3
source

I think you need to add special css to the combo box that displays the dropdown icon. It is not supported by Ext JS. Here is an example of how this can be done:

 var companyColumn = { header: 'Company Name', dataIndex: 'company', renderer: function(value, metaData, record, rowIndex, colIndex, store) { // provide the logic depending on business rules // name of your own choosing to manipulate the cell depending upon // the data in the underlying Record object. if (value == 'whatever') { //metaData.css : String : A CSS class name to add to the TD element of the cell. //metaData.attr : String : An html attribute definition string to apply to // the data container element within the table // cell (eg 'style="color:red;"'). metaData.css = 'name-of-css-class-you-will-define'; } return value; } }

Or you can use Ext.grid.TemplateColumn and specify the tpl configuration. This will automatically generate a render for the cells in the column and apply tpl .

0
source

More articles:


All Articles