How do I show a panel within another panel in ExtJS without it showing a blank screen?

Ext.define('something', {
    extend: 'Ext.panel.Panel',
    layout: 'border',
    constructor: function(config){
        let me = this;
        me.callParent(arguments);
        me.initConfig(config);

}
});

If I define a class as shown above, can I add an instance of it within another panel like so:

let mainPan = Ext.create("Ext.panel.Panel", {
    layout: 'border',
    items: [
        something,
        something else
    ]
});

this.add(mainPan);

I am facing issues with the display when trying to nest panels in this manner. Is there a way to resolve this nesting issue and have the mainPan display correctly?

javascriptextjs

Answer №1

Your implementation in creating panels is encountering some issues.

Below is a panel definition that can be added to other views using "xtype":

Ext.define('customPanel', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.customPanel',
        title: 'Inner Panel',
        height: 200,
        border: true,
        style: {
            border: '1px solid black'
        },
    });

Here is the code for creating the second panel and adding the first panel using "create":

xtype: 'customPanel'

let mainPanel = Ext.create("Ext.panel.Panel", {
        title: 'New Panel',
        border: true,
        style: {
            border: '1px solid black'
        },
        bodyPadding: 10,
        items: [{
            xtype: 'customPanel'
        }]
    });

Feel free to check out the working example using Ext JS 7 and the modern framework on this Fiddle link.

Answer №2

When aiming for a nested panel within one class, it is advisable to separate the "something" class from the main code. This is because defining a class does not allow you to create a nested panel in the same manner. Even if your code appears correct, it could still be placed in a loop. Therefore, the most effective approach would be to examine the meaning of the class and craft new code accordingly.

Ext.define('something', {
    extend: 'Ext.panel.Panel',
    layout: 'border',
});
Ext.define("mainApp", {
    extend: 'something',
    title: 'Biggest Thing',
    initComponent: function() {
        let me = this;

        let mainPanel = Ext.create('Ext.panel.Panel', {
            items: [
                Ext.create("something", {
                    title: 'Something'
                }),
                Ext.create("something", {
                    title: 'Something Else'
                })
            ]
        });
        Ext.applyIf(me, {
            items: [
                mainPanel
            ]
        });
        me.callParent(arguments);
    }
});

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

Exploring the differences between server-side rendering and client-side rendering in Express using Pug

I find myself in a state of confusion when it comes to distinguishing between what is considered client-side and server-side. Currently, as I develop a website using Pug for my HTML pages without any external files being loaded into the client's brows ...

javascriptnode.jspug

Dynamically and asynchronously loading numerous LinkedIn share buttons on a page

On my page, I have a grid of post thumbnails that are fetched via AJAX and can be filtered. When a user clicks on a thumbnail, a carousel opens with the selected post centered. In this carousel, each post has a LinkedIn share button integrated. The issue ...

javascriptajaxlinkedin-api

Remove bulleted list from HTML using JavaScript DOM

My task involved deleting the entire "agent" array using the removeChild() function, requiring the id of a <ul> element. However, I faced an issue as I couldn't set the id for the "ul" due to using the createElement() function. //old code < ...

javascriptphpjqueryhtmlcss

Scrolling and hovering now triggers the fixed button to toggle class seamlessly

Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...

javascripthtmljquerycssbutton

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

I am encountering an issue while loading a Chrome Extension using React. Whenever I try to load it, the error message below pops up: Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following ...

javascriptreactjsgoogle-chrome-extension

What is the correct method for configuring access permissions?

I'm in the process of developing a user management system, but I keep finding myself having to check the user type for each router. router.get('/admin/settings', (req, res) => { if(admin) { //Proceed. } } router.get(&apo ...

javascriptnode.jsexpress

I'm only appending the final element to the JavaScript array

Currently, I have the following code: I'm endeavoring to create a new JSON object named dataJSON by utilizing properties from the GAJSON object. However, my issue arises when attempting to iterate over the GAJSOn object; only its last element is added ...

javascriptarraysjsondata-objects

Can you show me how to use jQuery/JS to split this string into two separate arrays?

Can you help me separate this string into two arrays? { array1: [ 'mary', 'steve', 'george' ], array2: [ 'dog', 'cat', 'hobbit' ] } I attempted the following code but encountered a syntax err ...

javascriptjqueryjson

What is the best way to automatically close a parent popup window when the child popup is

Currently, I am developing a web application using Angular that requires managing nested popups. Specifically, in my scenario, I initiate Popup 1 and from within that popup, I trigger another popup (Popup 2) upon clicking "delete." My goal is to ensure tha ...

javascriptangularpopup

Import files from local directory to iframe in Electron application

I am currently working on an application using Electron that allows users to preview HTML5 banner ads stored locally on their computer. At this point, I have enabled the ability to choose a folder containing all the necessary files. Once a directory is s ...

javascripthtmlnode.jselectron

In VueJS 3, the data within the app.component instance will lack reactivity if it is declared within the data() or setup() functions

When it comes to declaring new reactive variables inside a component, I faced an interesting issue. It seems that setting the component globally, outside the app.component instance, and then returning it to either the data() or setup() function works perfe ...

javascriptvue.jsvuejs3vue-composition-api

When React first fetches data and users move to chat with each other, the state value does not update

Recently, I started learning about React and Node.js as I dive into building a chat application. When a user is clicked for one-on-one chat, I retrieve records from the database using backend Node.js and also incorporate socket.io. In my Chat.js file: imp ...

javascriptnode.jsreactjssocket.io

Vue: Customize data based on userAgent

As a newcomer to VUE, I am attempting to dynamically modify the disabled value based on the userAgent in order to display or hide the paymentMethod: data() { return { paymentMothods: [ { name: 'Visa che ...

javascriptvue.jsuser-agent

Strange behavior in Vue observed. The v-if directive is not properly monitoring changes

I am facing a perplexing issue. I have a basic service and a Vue component. In the template, there is a v-if directive that monitors a variable in the service (if it is true, a div should be displayed, otherwise not). Everything works fine when I initial ...

javascriptvue.jsfrontend

What methods with JavaScript, Ajax, or jQuery can I apply to populate the student details?

For completing the StudentID section, please fill out the form data.cfm with the first name, last name, and Middle Name. <script language="Javascript"> $(function() { $( '#effective_date' ).datepicker(); jQuery.validator.addMetho ...

javascriptjqueryajaxcoldfusioncoldfusion-10

"Extending Material-UI: Utilizing Multiple Snackbar Components

I've been struggling to display multiple warnings using Snackbar from the Material UI library in my React project. I haven't found any examples with React, only Vue. Can anyone help me with this? Here is the code that I have tried so far: https: ...

javascriptreactjsreact-reduxmaterial-ui

Steps for converting a JSON response into a .json file.Steps to transform a

I am looking to create a .json file within my local project directory. My goal is to store the response from a fetch API call, which is an array of objects, into a .json file. Here is the code snippet I am working with: ts : getRecords(){ this.serv ...

javascriptjsonangular

A guide to implementing daily function calls for a week utilizing the @nestjs/scheduler module

Is there a way to schedule a function to run every day for a period of 7 days using Nestjs (@nestjs/scheduler)? @Cron(new Date(Date.now() + (24*60*60*1000) * 7) function() { console.log("This should get called each day during the next 7 days") ...

javascriptnestjsscheduled-tasks

There seems to be an issue with updating the ng-model properly in angular-ui-tinymce

I have encountered a problem where I am attempting to add a DOM node when a custom button is clicked, but the model associated with the textarea is not being properly updated. To illustrate the issue, I have created a plunker as a demo. [https://plnkr.co ...

javascriptangularjsangular-ui-tinymce

Unexpected behavior encountered when using TypeScript type declarations

I am currently working on a Gatsby side project incorporating Typescript for the first time. I initially expected Typescript to behave similarly to PHP type declarations, but I have encountered some unforeseen issues. Despite feeling confident in my Typesc ...

javascriptreactjstypescripttypeerrorgatsby