Using Ext JS to display content in a specific div element

I am having trouble displaying an Ext JS component within a simple div. I know it should happen through renderTo, but when I try to assign the id of the div in the Ext JS code, it doesn't work.

For more details and code examples, click on the following link: https://jsfiddle.net/m10v973y/

<div id="bla"></div>

Ext.define('KitchenSink.view.form.FieldTypes', {
    extend: 'Ext.form.Panel',
    xtype: 'form-fieldtypes',
    renderTo:"bla",

    frame: true,
    title: 'Form Fields',
    width: 400,
    bodyPadding: 10,
    layout: 'form',

    // Include various form fields here
});

Answer №1

A class was defined without creating an instance, so it is necessary to include the following:

Ext.create('form-fieldtypes', {
        renderTo: "example"
    });

Additionally, make the following change:

xtype: 'form-fieldtypes',

Replace it with:

alias: 'form-fieldtypes',

Check out the updated JSFiddle link for reference.

Answer №2

One solution that worked for me was enclosing my containers within the following script:

Ext.onReady(function() {"insert your container code here" });

The Ext.onReady() function gets executed once Ext JS is prepared to display the elements created with Ext JS.

For more information, refer to this link.

I also had to eliminate setting values for width and height in my container. It caused issues when trying to render a div element with these properties defined.

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

Passport for Node.js: Securing User Access

(code updated with serialization functions - still redirecting to /failedRedirect) I'm attempting to establish basic username/password authentication using the passport library, but encountering difficulties. Even though I have set up the code to alw ...

coding with javascript and css

Essentially, I am trying to add padding specifically to the left side of this code snippet: if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("livesearch").innerHTML=xmlhttp.responseText; document.getElementById("live ...

Update the innerHTML content dynamically every 5 seconds with Vue.js

I'm working on a new website and I'd like to spice things up by changing the header text with a random word every 5 seconds. Here's the starting point: const header = document.querySelector('.header') const needs = ['jacket& ...

I am looking to enhance my JSON output using JavaScript

My JSON output appears as follows: {"intent":"P&P_Purchase","value1":{"date1":"30-Dec-19","prd_desc":"NEEM UREA OMIFCO (45 KG)","qty":"18MT","inv_no":"NRKT07003160"},"value2":{"date1":"25-Dec-19","prd_desc":"NEEM UREA IMP (45 KG)","qty":"18MT","inv_no ...

Access cookie information within a Vue application by reading it within the router or component

There is a url (*/webapp/callback) in my vue.js app that gets redirected (http 302) from another application, bringing along some cookies. I'm trying to figure out how I can read these cookies when the component mounts and then store them in vuex stat ...

Retrieving the initial entry from a JavaScript ES2015 Map

I am working with a Map structured as follows: const m = new Map(); m.set('key1', {}) . m.set('keyN' {}) The Map may contain one or multiple items. I am wondering if there is a way to retrieve the first item by index, without using m. ...

Converting SVG <g> elements into <image> tags with embedded base64 PNG URIs (learn more)

There's an interesting issue I've come across recently. I've observed that there are two distinct "types" of SVGs Firstly, we have the traditional SVG file with and tags: <svg version="1.1" xmlns="http://www.w3.org/2000/ ...

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet: $('html, body').animate({scrollTop:0}, 'slow'); It's interesting that they are trying to scr ...

Error Encountered in MERN Stack Development: TypeError Thrown Due to Inability to Convert Undefined

Currently, I am following the MERN Stack, Front To Back Course by Traversy Media. I am in the process of setting up the login functionality for the application. Despite ensuring that my code matches his exactly, I am encountering an error: TypeError: Canno ...

Encountered an error while trying to create module kendo.directives using JSPM

I am attempting to integrate Kendo UI with Angular in order to utilize its pre-built UI widget directives. After running the command jspm install kendo-ui, I have successfully installed the package. In one of my files, I am importing jQuery, Angular, and ...

Unregistering an event with AngularJS

Exploring the functions of a controller named MyCtrl: class MyCtrl { constructor($scope, $rootScope, ...) { this.$scope = $scope; this.$rootScope = $rootScope; this.doThis = _debounce(this.resize.bind(this), 300); ... ...

Glitch in Mean App: front-end feature malfunctioning during data storage in mongodb

I am encountering difficulties while working on a MEAN app. I attempted to establish a connection between the backend (Node.js, Express.js) and the frontend (Angular 6), but encountered some issues. The backend port is http://localhost:3000, and the fron ...

Creating a Recursive Facebook Page Data Scraper using Selenium and Node.js

I am trying to iterate through an array of Facebook page IDs and retrieve the code from each event page. However, I am encountering a problem where I only get the code of the last page ID in the array repeated multiple times. For example, if there are 3 ID ...

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window. One of the columns is labeled as Actions, which permits users to edit a record by c ...

Hidden Div on Google Maps no longer concealing

Since early December, the Google map on my site has been working perfectly. However, the other night, I noticed that the map now defaults to open when entering the site and cannot be closed. Strangely, all my Google maps are behaving this way even though n ...

Angular: When $scope variable is modified, a blank page issue arises

In my Angular application, I have a template called viewAll.html that is displayed after clicking on a link. This template fetches data via AJAX using scope variables. However, I encountered an issue where updating these scope variables through AJAX cause ...

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

Tips for eliminating nested switchMaps with early returns

In my project, I have implemented 3 different endpoints that return upcoming, current, and past events. The requirement is to display only the event that is the farthest in the future without making unnecessary calls to all endpoints at once. To achieve th ...

Using Rails: The Art of Safely Managing JavaScript code when working with AJAX on the client-side

How can I securely send a collection via to_json directly from the controller action to the client-side? When the request is sent from the controller action straight to the client-side without pre-processing, the process looks like this: An AJAX requ ...

Hold off on refreshing the page until all the $.get calls have finished executing

I am currently using a piece of JavaScript to execute an Ajax call which returns XML data. This XML is then processed, and another Ajax call is made for each "record" found in the XML to delete that record. However, I am facing an issue where the JavaScrip ...