Utilizing EXTjs views with varied "view models" for enhanced reusability

I am currently working on building a basic SCRUM system to familiarize myself with EXT 4. While I have some prior experience with MVC3, I am finding it challenging to adapt to the EXT4 framework.

My plan involves setting up 4 grids in a column layout Viewport, where each grid represents its own View. However, these Views are very similar with only minor differences. Below is the code for my initial View, with placeholders indicating the lines that need to be adjusted for the other three views.


        Ext.define('AM.view.card.BacklogList', { // *** Variable
            extend: 'Ext.grid.Panel',
            alias: 'widget.backlogcardlist', // *** Variable

            title: 'Backlog',       // *** Variable
            store: 'BacklogCards',  // *** Variable

            selType: 'cellmodel',
            plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1
                })
            ],

            columns: [
                // Columns details here...
            ]
        });
    

Is there a way in EXTjs to pass a 'ViewModel' or parameters to my View so that I can reuse it for all four of my grids?

app.js


        Ext.application({
            name: 'AM',

            appFolder: 'app',

            controllers: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards'],

            launch: function () {
                Ext.create('Ext.container.Viewport', {
                    layout: 'column',
                    items: [
                        {
                            xtype: 'backlogcardlist'
                        },
                        {
                            xtype: 'inprogresslist'
                        },
                        {
                            xtype: 'reviewlist'
                        },
                        {
                            xtype: 'donelist'
                        }
                    ]
                });
            }
        });
    

Answer №1

After finding a solution in a helpful post, I managed to figure it out:

Extjs 4 MVC loading a view from controller

I made the necessary changes to my app.js file like this:

Ext.application({
    name: 'AM',
    
    appFolder: 'app',

    controllers: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards'],

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'column',
            defaults: { flex: 1 },
            layout: {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            items: [
                Ext.widget('backlogcardlist',
                {
                    title: "Backlog"
                }),
                Ext.widget('backlogcardlist',
                {
                    title: "In Progress"
                }),
                {
                    xtype: 'reviewlist'
                },
                {
                    xtype: 'donelist'
                }
            ]
        });
    }
});

Simply adjusting the title property was all that needed to be done, and tweaking other properties shouldn't pose much difficulty.

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 could be causing this hydration error in NextJS in the development server build but not in the production build?

By using the create-next-app command and implementing this code snippet, a hydration error occurs on the client side when running the next dev server. The code in pages/index.js: export async function getServerSideProps(context) { const x = Math.random( ...

Leveraging Express.JS middleware exclusively for specific routes

In order to further my understanding of NodeJS, I am currently working on developing an API using ExpressJS that can respond to web requests. Currently, the program includes three routes: '/login', '/register', and '/changePassword ...

Create HTML code automatically from JSON data

Currently, I am in the process of developing a template system. The concept is that an ordinary user can create a JSON file which will then be used by the system to automatically generate HTML code. However, I am facing some challenges and feeling a bit lo ...

What steps should I take to resolve issues with the npm installation on Linux?

I'm encountering an issue while attempting to use npm install in order to install a package. Despite my attempts to update and re-download from the root directory, I am unable to resolve the error. hackathonday1-2 git:(save-button) ✗ npm install f ...

What is the process by which Quora loads two distinct webpages using one URL?

Have you ever noticed that when you visit without a Quora account, you are directed to a login or sign up page? But if you do have an account and visit the same URL, you're taken straight to your personalized feed. How does Quora manage to display di ...

Retrieving Data from Repeated Component in Angular 6

Need Help with Reading Values from Repeating Control in Angular 6 I am struggling to retrieve the value of a form field in the TS file. Can someone please assist me with this? This section contains repeating blocks where you can click "add" and it will g ...

The challenges with implementing makeStyles in React Material UI

const useStyles = makeStyles((theme) => ({ toolbarMargin: { ...theme.mixins.toolbar, marginBottom: "3em", }, logo: { height: "7em", }, tabContainer: { marginLeft: "auto", }, tab: { ...theme ...

Issue with radio button click event not triggering

Whenever I click on a radio button, I want to call a function, but for some reason, it's not working as expected. I found this fiddle that demonstrates exactly what I want, but when I implement it in my code, it doesn't work. Here's a snipp ...

Modifying the display property of an element using JavaScript

Hello, I'm encountering an issue with a section of my javascript code. I am attempting to make the #showAddress element display as block when the deliverservice radio button is clicked or checked. I have tried searching for solutions on Stack Overflow ...

Understanding JavaScript Prototypal Inheritance within ES5 Classes

I've been working on creating an XMLHttpRequest interceptor for Angular, encountering a roadblock when trying to intercept a third-party library that uses the XMLHttpRequest API. Although the solution below is functional, I've run into issues wit ...

JQuery may be successfully loaded, but it is not functioning as intended

Just started dabbling in JQuery (I'm a newbie) but I'm having trouble getting it to work! Initially, it worked a couple of times but then suddenly stopped working (pretty strange). I made some changes and now it doesn't work at all. JQuery a ...

Code in JavaScript: Generating Random Number within a Loop

Can anyone help me come up with a unique JavaScript loop that can guess a correct number within the range of 1-500? I want each iteration of the loop to generate a new number that has not been guessed before, but it should guess in a random order. For ex ...

Creating a cascading dropdown list box using Java servlets, JavaScript, JSP, a database, and Ajax, all without relying on Jquery or Json

My experience with Ajax is limited, but I am eager to utilize it to create a cascading drop down list box for my project. While I have found resources online that demonstrate the use of Ajax with JSON and JQuery, I am specifically looking to implement Ajax ...

Iterating through a nested array of objects to merge and accumulate values

Just started learning Javascript. I've been trying to wrap my head around it for hours, looking at examples, but still struggling. I'm working with an array of objects that have nested properties which I need to loop through and consolidate. ...

How can I import a model in a way similar to the three.js editor?

After importing a model into Three.js Editor, I observed that the model was not uploaded to a remote server. Instead, it appeared to be copied to the browser's cache (even working fine when disconnected from the network). I am interested in learning h ...

Verify the existence of a targeted JSON outcome and halt if not found

As a newcomer to Javascript and coding, I welcome any suggestions on how to improve my code for better tidiness and efficiency. I've browsed through similar questions related to this topic but couldn't find exactly what I'm looking for. Cu ...

When sending properties from one component to another in ReactJS, a null value is obtained

I am new to React and I'm struggling with passing props from one component to another. Below is my code, where I attempted to use this.props.value but it always returns "undefined" in the console. Oddly enough, when all HTML elements are placed in a s ...

Is there a way to upload a video, file, and PDF to a database using multer?

There is a database schema defined in the code below: const mongoose = require("mongoose"); const FormCourse_schema = new mongoose.Schema({ FormCourse: { type: mongoose.Schema.Types.ObjectId, ref: "cards", required: true, ...

What is the process for transferring a Python variable to JavaScript when the Python code is a cgi script?

I am currently working on a JavaScript file where I am attempting to assign a variable based on data received from a Python CGI script. My approach involves using the Ajax GET method to retrieve the data and set the variable within that method. Below is a ...

File bootstrap.min.css is currently experiencing compatibility issues

I am currently working on a website where I have two images that are displaying vertically. However, I would like these images to be displayed horizontally with animation. I attempted to use Bootstrap to achieve this horizontal layout, but when I include ...