All geek questions in one place

Extjs ComboBox inside the grid

I have a grid with some data (user list). For each line, I have many actions, such as updating, deleting, activating, pausing, viewing orders that you name.

Instead of placing so many buttons that fill more than 400-500 pixels, I want to put a drop-down list with the action applied to each field.

The problem is that I can’t just display the combobox in the column row in the exact same way, or am I missing something? Can someone shed some light on this, please?

new Ext.grid.GridPanel({ region: 'center', id: 'usersGrid', store: store, stripeRows: true, autoExpandColumn: 'username', columns: [ { // username }, { // email }, { // last seen }, { // actions combo, it won't show header : '', width : 220, fixed : true, hideable : false, dataIndex: 'actions', renderer: new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ id: 0, fields: ['abbr', 'action'], data : [ ['suspend', 'Suspend'], ['activate', 'Activate'], ['update', 'Update'], ['delete', 'Delete'] ] }), displayField:'action', valueField: 'abbr', mode: 'local', typeAhead: false, triggerAction: 'all', lazyRender: true, emptyText: 'Select action' }) } ] })
+4
source share
4 answers
  • Convert Grid to Editable Grid
  • Add editor configuration to columns instead of renderer. Find the modified code below.
 new Ext.grid.EditorGridPanel({ region: 'center', id: 'usersGrid', store: store, stripeRows: true, autoExpandColumn: 'username', columns: [ { // username }, { // email }, { // last seen }, { // actions combo, it won't show header : '', width : 220, fixed : true, hideable : false, dataIndex: 'actions', editor : {xtype:'combo', store: new Ext.data.ArrayStore({ fields: ['abbr', 'action'], data : [ ['suspend', 'Suspend'], ['activate', 'Activate'], ['update', 'Update'], ['delete', 'Delete'] ] }), displayField:'action', valueField: 'abbr', mode: 'local', typeAhead: false, triggerAction: 'all', lazyRender: true, emptyText: 'Select action' } }]

})

+9
source

You are trying to accomplish this mostly correctly. The way to add a custom editor may require some configuration. Have you tried this change?

 editor: new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ id: 0,

Unfortunately, I cannot determine what your code does and does not work.

What version of ExtJS are you using? One remark that I find is that I do not see any object named Ext.data.SimpleStore in the current ExtJS API documents. Have you tried using a different type of data warehouse? You might want to try using a different type of storage for this combo?

0
source

How is the right-click context menu for each line?

0
source

Set the column rendering method for this method ....

https://github.com/mrlayeghi/ComboRenderer

0
source

Source: https://habr.com/ru/post/1333458/

More articles:


All Articles