Implementing Ext JS Checkbox Inside a Row Editor

Does anyone have a solution for aligning the checkbox in a RowEditor to the center position? I am using the "triton" theme with Ext JS 6.0.0.

The issue is that the checkbox is currently placed at the top of the row, while other fields like textfield or combobox are centered.

This is how it looks:

https://i.sstatic.net/KKOjs.png

I've tried setting the style object of the checkbox to align: center, but it didn't work.

plugins: { ptype: 'rowediting', clicksToEdit: 2, saveBtnText: 'Übernehmen', cancelBtnText: 'Abbrechen' },

initComponent: function() {
    var me = this;
    me.store = 'MeasurementPoint';
    me.columns = [
        {
            xtype: 'actioncolumn',
            width: 50,
            sortable: false,
            hideable: false,
            resizable: false,
            menuDisabled: true,
            draggable: false,
            items: [
                {
                    icon: 'Content/images/icon_32/garbage.png',
                    tooltip: 'Löscht den Eintrag',
                    handler: function(view, rowIdx, colIdx, item, ev, record) {
                        Ext.Msg.show({
                            title: 'Löschen bestätigen!',
                            msg: 'Soll der Messpunkt \"' + record.data.Name + '\" wirklich gelöscht werden?',
                            width: 300,
                            buttons: Ext.Msg.YESNO,
                            fn: function(btn) { if (btn === 'yes') view.ownerCt.getStore().remove(record); },
                            //animateTarget: rowIdx,
                            icon: Ext.window.MessageBox.QUESTION
                        });

                    }
                },
                {
                    icon: 'Content/images/icon_32/pencil.png',
                    tooltip: 'Bearbeitet den Eintrag',
                    handler: function(view, rowIdx, colIdx, item, ev, record) {
                        if (this.__form)
                            return;

                        this.__form = Ext.widget('window', {
                            layout: 'fit',
                            width: 500,
                            title: 'Messpunkt bearbeiten',
                            items: { xtype: 'measurementpointform', header: false },
                        }).show();
                        this.__form.down('button[itemId=save-measurementpoint]').action = 'update-measurementpoint';
                        this.__form.down('form').loadRecord(record);
                        this.__form.on('close', function() { this.__form = false }, this, { single: true });
                    }
                }
            ]
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Active',
            text: 'Aktiv',
            width: 70,
            renderer: AWA.ImageRenderer.CROSS,
            editor: {
                xtype: 'checkbox',
            }
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Manually',
            text: 'Manuell',
            width: 90,
            renderer: AWA.ImageRenderer.TICK,
            editor: {xtype: 'checkbox'}
        }

Appreciate any help on resolving this checkbox alignment issue. Thank you!

Answer №1

I successfully changed the CSS settings to suit my needs

.x-grid-editor .x-form-cb-wrap {
    vertical-align: middle;
}

Thank you!

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

Angular2: Leveraging click events to manage CSS classes on elements

I am currently developing a web app using Angular 2. I'm facing an issue where the active element should receive an extra CSS class when clicked, but adding the ":active" CSS attribute with a custom class doesn't work as expected. The ":focus" pr ...

The process of transferring information from a JSON API to TypeScript models

When working with my JSON API in my services, I need to pass the data to my models. What is the most efficient way to accomplish this task? Currently, I am following this process: import { Attachment } from '.'; export class Contact { id: nu ...

Issue with Fullcalendar's events.php causing JSON object retrieval failure

I'm attempting to send a JSON object as a response to my fullcalendar ajax request, but instead of returning the desired result, it only returns an array. Although I am relatively new to JSON and PHP, I have conducted extensive research and have yet t ...

Guide on forwarding from one HTML page to another in the local disk

Currently, I am working on an employee appraisal application where users can submit appraisals that are stored in the backend. The initial page is a login screen. Once the user successfully logs in, they should be redirected to another page displaying in ...

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

Data binding in Vue.js seems to be malfunctioning

I'm having trouble with my Vue component creation. I've been using v-show to hide certain elements, but it doesn't seem to be working as intended. The goal is to hide an element when clicked from a list by setting element.visible to false i ...

Angular 15 experiences trouble with child components sending strings to parent components

I am facing a challenge with my child component (filters.component.ts) as I attempt to emit a string to the parent component. Previously, I successfully achieved this with another component, but Angular seems to be hesitant when implementing an *ngFor loop ...

Is the presence of hidden list items leading to excessive white space?

I have a menu that appears when hovering over a list item. Here is an example: <li> <ul class="topmenu"> <li class="submenu"> <a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt= ...

Showing various records dynamically with AngularJS

I have some AngularJS Code below where I am currently adding four records to roleList. However, I would like to be able to add any number of records to roleList. Is there a way for me to achieve this? $scope.roleList = [ {"companyName": "Company 01" ...

The Angular material datepicker is not accurately capturing the date I am trying to select

I am facing an issue with the Angular Material datepicker where it does not select the date I choose. Instead, in my AngularJS controller, I always get the sysdate even if I select another date. Can anyone help me figure out what I am doing wrong? Here is ...

Refresh table with data submitted via form on current page

Here is the coding found on my homepage: <html> <head> <title>Testing PHP</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="formDiv"> <form action="t ...

Best Practices for Integrating PHP Code into an HTML File for Contact Form Placement

My current setup involves an html file named index.html, which contains the code for my contact form fields such as name and email. Is there a way to include PHP code in this file without converting it to index.php? ...

Is it possible for a d3 chart to render twice in one area if it's rendered in two different places?

When attempting to showcase two distinct d3 pie charts on my webpage within individual mat-cards, they both end up displaying in the svg tag of the first d3 chart in my code. This is what my code looks like: <section class="three"> <! ...

Find any consecutive lowercase or uppercase letter and include one more

I have a task in Javascript that I need help with. The goal is to insert a special character between a lowercase and uppercase letter when they are matched together. For example: myHouse => my_House aRandomString => a_Random_String And so on... T ...

Updating the variables of HTML components using JavaScript after making an AJAX request

I am using ajax to fetch a list of user data. But after this ajax call, I need to display the data in an HTML structure like a datasheet for each user. My question is how can I store the HTML code in a functional and elegant way to maintain readability and ...

Abrupt surge in Firestore read operations detected in Next.js application following a period of no modifications - refer to the accompanying visual

https://i.sstatic.net/vim7m.png During the initial 10 days of working on the project, I noticed a consistent range of reads between 100 - 300 per day while regularly refreshing documents from firestore. Days 11-15 were spent away from the project visiting ...

One array comprises of all elements found in a separate array

After grappling with this problem for a while, I still haven't been able to find a solution. If I have 2 arrays structured like this: array1 = [ { name: 'John', age : 25}, { name: 'Jane', age : 58} ] array2 = [ { name: ...

Using the JavaScript JSX syntax, apply the map function to the result of a

My aim is to create a structure resembling the following: <td> {phones.map((phone, j) => <p>{this.renderPhone(phone)}</p> )} </td> However, there may be instances where the phones array is not defined. Is it feas ...

Utilizing JQuery Mobile to handle multiple forms on a single page and submitting each form uniquely by its ID using JQuery Post

After experimenting with assigning the same form ID to all forms on the page and also giving each form individual IDs with unique.submit functions, I encountered an issue where only the first form would work while the rest would redirect me back to the hom ...

How are Node and projects utilizing Node modules related to each other?

Having experience with React and React Native in several projects, I am now shifting my focus to learning Node JS. Throughout my previous work, I have relied on npm for downloading node modules and executing commands like npm start. However, I have a few q ...