Is it possible to show a delete icon beside every item in a form using Sencha Touch?

In my Sencha Touch FormPanel, I am looking to include a "delete" icon or button to the left of each item in the form panel's label. However, I am struggling to find a way to create a form item with two columns - one for the delete button and one for the field that the button is placed next to.

Currently, my layout looks like this:

    +++++++++++++++++++++++++++++++++++
   | Tab 1| Tab 2 | Tab 3 | Tab 4 |    |
   |   Label   |   Input               |  
   |   Label   |   Input               |  
   |   Label   |   Input               |  
   |   Label   |   Input               |  
    ++++++++++++++++++++++++++++++++++++

but I want it to look like this:

        +++++++++++++++++++++++++++++++++++
       | Tab 1| Tab 2 | Tab 3 | Tab 4 |    |
  DEL  |   Label   |   Input               |  
  DEL  |   Label   |   Input               |  
  DEL  |   Label   |   Input               |  
  DEL  |   Label   |   Input               |  
        ++++++++++++++++++++++++++++++++++++

If anyone has any guidance on how to achieve this desired design, please let me know. I have attempted using Panels as form items, but the buttons end up stacking vertically with the form inputs instead of aligning horizontally.

javascriptsencha-touchextjs

Answer №1

Have you considered utilizing the hbox layout?

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

Troubleshooting ASP.NET MVC3: The mystery behind why my custom validation attributes always seem to fail

After completing several tutorials, I have successfully implemented my models from a library file (dll). Everything seems to be functioning correctly except for one issue. Here is my model: public class RoomBookingInsert { public Int32 CostCentreNo ...

javascriptasp.netasp.net-mvc-3validationmodels

Using JavaScript to assign function arguments based on arbitrary object values

I am facing a challenge with a collection of arbitrary functions and a method that takes a function name along with an object or array of parameters to call the respective function. The issue arises from the varying number of inputs in these functions, som ...

javascripttypescript

Struggling to access FormData in php

I'm having trouble retrieving variables from FormData in PHP after making an AJAX call. What could be causing this issue? Here is the snippet of my JavaScript code: var sendData = new FormData(); sendData.append('itemid',$('select#sel ...

javascriptphpjqueryajaxform-data

Unsuccessful execution of JavaScript in returned HTML after being appended with jQuery .load() or .ajax()

I have attempted to use .load() and $.ajax in order to retrieve some HTML that needs to be added to a specific container. However, the JavaScript enclosed within the fetched HTML is not executing when I add it to an element. When employing .load(): $(&ap ...

javascriptjqueryajaxload

Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the co ...

javascriptjquerycssresponsive-design

Unable to substitute 'npm run build' for 'webpack' command

I'm having trouble with npm run build not calling webpack as expected. I've modified the script in my package.json file, but it didn't work. I'm using Linux. Here is a snippet from my package.json file: { "name": "learn-webpack", ...

javascriptnode.jsnpmwebpacknpm-scripts

Chrome browser experiencing a disappearing vertical scroll bar issue on a Bootstrap Tab

<div class="tabs-wrap left relative nomargin" id="tabs"> <ul class="nav ultab" id="fram"> <li class="active"><a href="#history" data-toggle="tab" id="history1" >History< ...

javascripthtmlcsstwitter-bootstrapscrollbar

Is there a way to modify the button's color upon clicking in a React application?

I am a beginner in the world of React and currently exploring how to utilize the useState hook to dynamically change the color of a button upon clicking. Can someone kindly guide me through the process? Below is my current code snippet: import { Button } ...

javascriptcssreactjsreact-hooksfrontend

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

javascripthtmlcss

Events triggered when the mouse hovers over an element and then moves

After spending hours reading articles and watching YouTube videos, I am completely lost. No matter what code I try, it seems like I can never get it right. It's frustrating how such a simple task can be so confusing. I just can't seem to wrap my ...

javascriptjquerymouseentermouseout

Incorporating PHP generated content into Dart without using Ajax

My current website is built using PHP (Laravel) on the server side and Javascript on the client side. Now, I am interested in replacing the Javascript with Dart. Currently, I inject data into the Javascript on the webpage like this: <script> va ...

javascriptphpajaxdart

Can TSLint and ESLint give a warning when a function is accessed as a property?

There have been instances where I've made this specific mistake, and I'm curious if there are any ESLint or TSLint rules in place that could detect it. if (this.isBrowser && this.imageURL) {.....} private isBrowser(): boolean{ retur ...

javascripttypescripteslinttslint

Updating text in React Native does not reflect changes in context after a state change

I'm facing a challenging issue that I just can't seem to figure out. Here's the dilemma: <TouchableOpacity onPress={() => { if (myContext.value) { alert('true'); //changes myContext.value to false } els ...

javascriptandroidiosreactjsreact-native

Obtain the complete path in Vue router by utilizing nested routes

After creating nested routes for Vue Router, I encountered a problem while using the routes to generate a navigation menu. Currently, I am using route.path in 'router-link :to=' which only gives me a part of the path. I want to include the absolu ...

javascripttypescriptvue.jsvue-router

Angular Directives: Bringing Clarity to Your Code Base

I have a collection of project items that can be sorted in three different ways: by name, date, or randomly. When sorted by name or date, the items are grouped by the first letter of the name or the year of the date. However, when sorted randomly, there i ...

javascriptangularjsangularjs-directive

A collection of dropdown fields sharing identical names but containing distinct IDs

I am looking to create an array of select fields with the same list of option values. The goal is to prevent a value that is selected in one field from appearing in another field. For example, if "a" is selected in the first field, it should not be avail ...

javascriptphpjqueryhtmlmysql

Check out the selected values in Ionic 3

I am trying to retrieve all the checked values from a checkbox list in an Ionic3 app when clicked. Below is the code snippet: <ion-content padding> <ion-list> <ion-item *ngFor="let item of items; let i= index"> <ion-label>{{i ...

javascriptangularjstypescriptionic-framework

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

javascripthtmlcssreactjs

The Iframe fails to load initially, but displays correctly upon manual refresh

Currently, I am working in an environment using Asp.net/C# and Visual Studio 2013 to develop a web application. I have created a page (aspx) with a single iframe on it, along with a JavaScript method that utilizes jQuery to inject HTML into that frame. & ...

c#javascriptasp.netiframe

Get the threejs model in .stl format downloaded

I recently discovered a library that allows you to download stl files from threejs. You can find it here. As someone new to js / threejs, I am curious about how to integrate this into my script or link it as a library or separate file. It is worth noting ...

javascriptthree.jsstl