Ext JS - A grid cell containing varying values, accompanied by a selection of combo boxes

I'm currently implementing the Ext JS Grid component and have a list of fields with their respective data types:

ID (int)
Name (string)
Foods (List<string>)

Each user can have multiple foods, selected from a Food DataStore. Displaying this in a cell is easy with a custom renderer, but editing these foods is more complex.

My goal is to have a combo box appear for each food item when a user edits the Foods cell, populated from the Foods DataStore. Additionally, users should be able to add or delete items, requiring some form interface.

If anyone has suggestions on how to achieve this efficiently, I would greatly appreciate it. I've looked through Ext JS documentation but haven't found a suitable solution yet, as I am still quite new to it.

Any help or advice would be welcome.

Thank you,

B.J.

javascriptextjs

Answer №1

One recommendation I have is to remove the editing functionality from your grid and only use it for displaying data. Editing could be done easily through a popup displayed using Ext.msg after the rowclick or rowdblclick event. HTML tags can also be utilized within the Ext.msg.

To explore capturing the cellclick event, you can refer to this link.

Answer №2

I implemented a similar solution in the past, albeit without the capability to add or remove items dynamically.

To achieve this functionality in your grid, you should configure the editor for the specific column as a combobox. There is no need to modify the renderer; the combobox will handle it seamlessly.

xtype: 'grid',
store: Ext.create('MySite.store.UserStore'),
columns: [
    { header: 'ID', dataIndex: 'id' },
    { header: 'Name', dataIndex: 'name' },
    {
        header: 'Foods', dataIndex: 'foods', minWidth: 200,
        editor: {
            xtype: 'combobox',
            store: Ext.create('MySite.store.FoodStore'),
            valueField: "food",
            displayField: "food",
            editable: true,
            maxHeight: 150,
            width: 310,
            multiSelect: true
        }
    }
],
selType: 'cellmodel',
plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })
]

The UserStore responsible for populating the grid must utilize a 'auto' type for the List field.

Ext.define('MySite.store.UserStore', {
    extend: 'Ext.data.Store',
    storeId: 'UserStore',
    autoLoad: true,
    fields: ['id', 'name', { name: 'foods', type: 'auto' }],
    proxy: {
        type: 'ajax',
        url: // Specify your data provider URL here
        reader: {
            type: 'json',
            root: 'items',
            successProperty: 'success',
            messageProperty: 'message'
        }
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to show customized text from a data member within the :items object array for the item title in a v-select (Vuetify) dropdown menu

Currently, I am new to Vue and exploring Vuetify while working on building a dropdown using "v-select". If there is a simpler way to achieve this, it would be awesome! Otherwise, my plan is to create a new array, convert data for certain members into obje ...

javascriptvue.jsfrontendvuetify.jsv-select

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

javascripthtmlcssreactjssettimeout

Personalized search feature for Bootstrap tables

Below is the table structure: <table> <tr> <th>Number</th> <th>Name</th> </tr> <tr> <td>200.10.1234</td> <td>Maria Anders</td> </tr> <tr> < ...

javascriptjquerybootstrap-4bootstrap-table

Disabling the authentication prompt in the browser

Apologies for the repetition, but I would like to pose a more general question. Is there any method on the client side of a web application to predict if requesting a resource will result in a 401 status code and trigger an unattractive authentication pro ...

javascriptflashhttp-authenticationsuppress

How can I utilize the mapv tool created by Baidu in a Node project?

I need assistance converting the following code to a node environment. The code can be found at Here is the code snippet: var map = new BMap.Map(slice.selector, { enableMapClick: false }); // Create Map instance map.centerAndZoom( ...

javascriptnpm

Create a new JSON file to preserve the value of a JSON object

I am working with a JSON file that looks like this: { "soils": [{ "mukey": "658854", "mukeyName": "Meggett-Kenansville-Garcon-Eunola-Blanton-Bigbee (s1517)", "sl_source": "Fl soil map", "cokey": "3035468", "soilName": "Eunola", " ...

javascriptjson

Using jQuery for communication between a parent and a popup tab

There have been numerous discussions on the topic of communication between a popup and its parent using window.opener.$('#myDiv'). However, once a popup is launched, how can the parent target and manipulate a specific div within the popup? ...

javascriptjquery

how to implement a delay in closing a window using JavaScript

I am currently developing a Google Chrome extension and I want to express my gratitude to everyone here for tolerating my sometimes silly questions. The functionality of the extension is quite basic but it works smoothly. However, I am facing an issue wher ...

javascripttimersetinterval

Using AngularJS to chain promises

After coming across some advice on AngularJS validation and promises, I am interested in creating a chain of confirmation dialogs to validate multiple steps at once. By making an API call based on user input, we can determine what steps require confirmati ...

javascriptangularjspromiseangular-promise

Can Java provide functionality similar to JS callbacks?

Can a similar functionality be achieved in Java? function sum(num1, num2, onComplete) { var result = num1 + num2; onComplete(result); } (function(){ sum(3, 5, function(res){alert(res)}); })() Is it possible to implement this in Java without ...

javascriptjavacallback

Assign an onClick event to a Button that was dynamically generated within a loop in JavaScript

Is there a way to set the onClick property for buttons created within a loop? I've tried using JQuery with no success. for(started somewhere... var button = document.createElement('button') var div = document.createEl ...

javascripthtmlgenerated

What steps are involved in making select fields that change dynamically?

There are two fields available for the user to interact with: size and design. Users have the ability to add more instances of these fields as many times as they desire. Illustration: If I choose M for the size, it will display in the console: Furthermo ...

javascriptreactjsmaterial-ui

Retrieving JSON data using the fetch method in JavaScript

Currently, I am attempting to retrieve a JSON array using AJAX. Upon calling my test.php file, the following content is returned: [{"name":"James","age":24},{"name":"Peter","age":30}] This is the JavaScript code that I am using: var persons = new Array( ...

javascriptjqueryajaxarraysjson

Animate the sliding of divs using the JavaScript animation function

I've designed some boxes that function similar to notifications, but now I want to smoothly slide them in from the left instead of just fading in. I know that I need to use .animate rather than .fadeIn to achieve this effect. The code snippet I&apos ...

javascriptjquerycssanimation

Authenticate through navigation on an alternate component

I am in the process of developing a user interface that includes a side navigation and header bar. However, if the user is not logged in, I wish to redirect them to the login page. The primary component structure is as follows: class App extends Componen ...

javascriptreactjs

Exploring the capabilities of CasperJS through double clicking

I'm currently working on creating a bot using CasperJS. The main goal is for the bot to send trade offers by offering an item, but I'm facing difficulties in figuring out how to click on the item. I attempted to use Resurrectio, however, it' ...

javascriptcasperjsbotsdouble-clicksteam

Integrating an external JavaScript library into the codebase

I created a web radio player using Vue Cli and now I need to incorporate a new feature with an external library, specifically designed for handling audio advertisements. The catch is that this library must be loaded from a remote server and cannot be simpl ...

javascriptvue.jswebpack

Need help speeding up website load times?

My website is loading incredibly slow, even though it has minimal content. I suspect that the high number of images and JavaScript elements on the page are contributing to this issue. Is there a method available to diagnose what exactly is causing the ext ...

javascriptjqueryhtmlcss

Symfony using Vite with Vue 3 encounters an error: Uncaught ReferenceError - exports is undefined

Currently, I am in the process of developing a Symfony 3 Application with Vite and Vue3 integrated with TypeScript. To replace Symfony's Webpack Encore, I opted for the Vite Buildtool using this convenient plugin: https://github.com/lhapaipai/vite-bu ...

javascripttypescriptvue.jssymfonyvite

Utilizing Arrays for Angular Data Binding with AJAX

I am currently experimenting with loading Ajax data into an array and then binding the array using Angular. Here is my code (I have some experience with KO, so I'm keeping it simple for now): Update: I managed to get it working. I believe the issue w ...

javascriptjqueryangularjsajaxonsen-ui