How to add an element to an array with a function in ExtJS

I am looking to add an element to the drawnShapes array within the draw() function

and the getDrawnShapesCount() function should return the total number of shapes drawn

The drawnShapes variable represents an array of shapes

Ext.define('Shape', {

static: {
    drawnShapes: ['Shape1'],
    getDrawnShapesCount: function () {
        console.log('the number of drawn shapes is :' +this.drawnShapes.length);
    }
},
draw: function (newShape) {
    debugger;
    var newShape;
    this.drawnShapes[this.drawnShapes.length -1 ]=[newShape];
// I try push too and it doesn't work
// this.drawnShapes.push(newShape);
    console.log(newShape + 'is drawn....');
    console.log('the number of drawnShapes is ' + this.drawnShapes.length)
}, 
});

Answer №1

To successfully add a new shape, utilize the following code:

this.drawnShapes.push(newShape)

If this method is not functioning as expected, it is possible that the variable newShape has not been instantiated. This variable appears to be empty and needs to be defined before attempting to push it into an array. Please make sure you are providing all relevant code for further assistance. Consider modifying the code as follows:

/* REMOVE THIS var newShape; */
this.drawnShapes.push(newShape);

Instead of declaring var newShape locally, pass it as an argument so that the declaration does not overwrite the value provided.

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

Is your angularjs localstorage giving you trouble?

I am encountering an issue with local storage on my webpage. Upon initial visit, I am seeing an outdated value from local storage. However, upon refreshing the page, I am able to access the current value. How can I prevent this error and ensure that I only ...

Difficulty building due to uppercase import in NPM dependency

While working on my Angular project, I encountered a dependency that uses Upper Camel Case import. from "./CSSToMatrix" export { parse, parseMat, toMat, getDistElementMatrix, caculateMatrixDist, getElementMatrix, createMatrix, } from "./C ...

The value of Yargs.argv is consistently displayed as [object Object]

In my Ubuntu 16.04 environment, I enrolled in a node.js course on Udemy. Following the instructor's guidance, I initially used the exact version mentioned and later updated to the latest version (11.0.0). Surprisingly, both versions yielded the same o ...

Tips on creating an inline editable cell in a Tree View

I've been working on a category tree that includes expand and collapse buttons. You can see what I have so far here: Category Tree Now, I'm looking to make each item inline editable. Can someone guide me on how to achieve this? If you want to t ...

How can I link a Vue.js webpage with a WordPress site?

Looking to integrate a Vue.js 2 single page into an existing WordPress website? Perhaps you've already got an old WordPress site and now want to develop a new Vue tool or page that can be added seamlessly to the menu. How can this be achieved within W ...

Discovering WebElements nested within other WebElements using WebdriverJS

Looking at this HTML structure <div> <div> <p class="my-element"></p> </div> <div> <div> <div> <p class="the-text"> I want to retrieve this text</p> </div> </div> <div> ...

A Foolproof Method to Dynamically Toggle HTML Checkbox in ASP.NET Using JavaScript

Although there have been numerous inquiries related to this subject, I haven't been able to find a solution specific to my situation. I currently have a gridview that contains checkboxes. What I'm trying to achieve is that when I select the chec ...

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

Is it possible to decode a two-dimensional array of objects in JSON?

My scenario involves a two-dimensional array of objects structured as follows: function test(n){ this.id = n; } var testArray= new Array(2); for(i = 0; i < testArray.length; i++){ testArray[i] = new Array(2); for(j = 0; j < testArray[i].lengt ...

Is there a way to verify that all CSS files have been successfully downloaded before injecting HTML with JavaScript?

I am looking to dynamically inject HTML content and CSS URLs using JavaScript. I have more than 3 CSS files that need to be downloaded before the content can be displayed on the page. Is there a way to check if the aforementioned CSS files have finished ...

What is the best way to tally a score after analyzing two spans in Javascript?

I have 3 spans where 2 contain an alphabet each. The third span is left blank for the result of comparing the first 2 spans. I need to display the result in the last span, showing a value of 1 if the two spans contain the same alphabet. Can anyone sugges ...

Examining an array to identify palindromes

Is there a way to loop through an array and check if each word is a palindrome, instead of manually passing an argument for each word? If a word is a palindrome, return the word; otherwise, return 0. var myArray = ['viicc', 'cecarar', ...

Alert: It is invalid for an <a> element to be nested inside another <a> element according to validateDOMNesting

I've been experimenting with using react-router in conjunction with reactstrap and create-react-app. While setting up the routing within my application, I encountered a need to utilize state for the reactstrap components. To achieve this, I converted ...

Divide a string into an array starting from the end

I have a unique phrase. var phrase = "LoremipsumdolorsitametconsectetuadipiscingelitSeddoeiusmodtemporincididuntutlaboreetaliqua"; I am interested in dividing it into chunks of 11 characters starting from the end. Currently, I use: function splitPhrase ...

Increase the number of key-value pairs within the elements of an array using PHP

If I have an array with the initial element: Array ( [name] => John Doe [occupation] => engineer ) Now, I want to add more properties so that the final result looks like this: Array ( [name] => John Doe [occupation] => engineer [skill] => ...

The functionality of the d3 Bar chart with a tool tip seems to be malfunctioning

Working on a D3 svg chart with built-in tooltips using the d3-tip library. Check out the original code here. Utilizing Django as the back end to populate log count per year from datetime. Successfully populated axis and labels except for the bars. Here i ...

The inline variables in CSS transitions are failing to be detected

The CSS transitions are not recognizing the inline variables, or if they are, they are not receiving the correct information. Below is an illustration of how the inline variables are defined in the HTML: <p class="hidden" style="--order ...

Adding default parameters in AngularJS Route-UI is a useful feature for setting up

Using angular UI-Router in my app, I've set up my base language as English. I have both English and Hebrew locals, and I want to avoid adding parameters to the URL if the language is English. For instance: Home English --> http://example.com/ ...

Verifying the presence of an object in an array based on its value using TypeScript

Having the following dataset: roles = [ {roleId: "69801", role: "ADMIN"} {roleId: "69806", role: "SUPER_ADMIN"} {roleId: "69805", role: "RB"} {roleId: "69804", role: "PILOTE"} {roleId: "69808", role: "VENDEUR"} {roleId: "69807", role: "SUPER_RB"} ] The o ...

How can I implement user flow using AngularJS?

We're facing an issue with implementing UserFlow in our AngularJS app. Our product is built on older version of AngularJS (1.8) and although we find the concept of UserFlow appealing, we are running into a problem. The standard injection and initiali ...