Converting an object to an array and assigning the values to a select field in Sencha

My issue lies in setting the selectfield for England, which I am retrieving from the server. Despite being able to set textfields like this:

Ext.getCmp('email').setValue(email);

Why doesn't this work for selectfields?

I am relatively new to Sencha and now attempting to convert an array.

var testcountry = Ext.create('Test.store.CountryList');
console.log("Length of Country===" + testcountry.getCount());
console.log("Country===" + testcountry);

for (var i = 0; i < testcountry.getCount(); i++){
    console.log("Country Value--" + testcountry.getAt(i).data.country);
}

The line console.log("Country Value--" + testcountry.getAt(i).data.country);

prints all countries as undefined in the console.

In the Model:

Ext.define('Test.model.countryList', {
    extend: 'Ext.data.Model',
    alias: 'widget.countrylist', 
    config: {
        fields: ['text']
    }
});

In the Store:

Ext.define('Test.store.countryList', {
    extend: 'Ext.data.Store',

    config: {
    storeId: 'countryList',
    model: 'Test.model.countryList',
    data: [
    { text: ''},
    { text: 'Japan'},
    { text: 'India'},
    { text: 'Spain'},
    { text: 'Australia'},
    { text: 'Sudan'},
    { text: 'Brazil'},
    { text: 'Mexico'},
    { text: 'England'},
    { text: 'China'},
   ]
}
});

The Console output is as follows:

Length of Country===9 
Country===[object Object] 
Country Value--undefined 
Country Value--undefined 
Country Value--undefined 
Country Value--undefined 
Country Value--undefined 
Country Value--undefined 
Country Value--undefined 
Country Value--undefined 

How can I properly display all countries?

Answer №1

Here is a simple For loop example that you can use:

for (var j = 0 ; j < myCountry.getCount() ; j ++){
    console.log("Country Name--"+myCountry.getAt(j).getData().name);
}

Make sure to specify the correct field name from your model.

UPDATED CODE:

If you want to display this in a Selectfield, follow this format:

{
                        xtype: 'selectfield',
                        placeHolder: 'Choose Country',
                        store: 'countryList'
                    } 

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

JavaScript or jQuery for filtering table rows

I have limited experience with JavaScript and jQuery, but I am working with a table containing various entries. My goal is to implement a filtering system using a list on the left side of the table. Here is an example I put together: http://jsfiddle.net/B ...

Google Analytics in Next.js Missing Page Title Configuration

I recently set up Google Analytics on my Next.js website, but I'm encountering a strange issue where the analytics are not detecting my webpages and showing as (not set). Everything else seems to be functioning properly. I've double-checked that ...

Load data from a file into a dropdown menu using node.js

Exploring the realm of front end development on my own has been quite a challenge. I am currently struggling with the concept of populating a drop down box with data from a file. While utilizing node and JavaScript, I have decided to stick to these techn ...

The button with type Submit inside the form is failing to trigger the Form Submit Event

Having an issue with a custom LoadingButton component in my React TypeScript project using Material-UI (MUI) library. The problem occurs when using this LoadingButton within a form with an onSubmit event handler. The LoadingButton has type="submit&quo ...

Expand the width of the image gradually until it reaches its initial size within a flexible DIV container

I am working with a <div> container that occupies 80% of the screen on a responsive page. Within this <div>, I am attempting to display an image that is sized at 400 x 400 pixels. My objective: As the screen width increases: The <div> ...

Best practices for declaring variables in ReactJS

I need help understanding how to declare a variable in a React JS class so that it is accessible in different functions. Here is my code snippet: class MyContainer extends Component { constructor(props) { super(props); this.testVariable ...

Enable a VueJS directive on-the-fly from a separate directive

My goal is to simplify the process of binding a form control to vuejs by creating a directive that handles all necessary events for tracking changes in a form field. Rather than manually adding multiple event listeners like this: <input type="text" na ...

Animated text in ThreeJS

I'm interested in finding a way to animate text in ThreeJS that doesn't involve placing it directly on a plane. My ideal scenario would be to have the text appear as 2D, floating above a model. I've experimented with using divs positioned ou ...

"Utilizing JavaScript to parse and extract data from a JSON

I just received a JSON object through a PHP get request and it has the following structure: data == {"user_id":"7","emp_type_id":[{"0":"11","1":"10"}]} My main focus right now is to retrieve the values within emp_type_id, which are "11" and "10" in this ...

When an array becomes empty, the interaction between v-for and v-if fails to function properly

Today I encountered a rather peculiar issue that I would like to share here: I noticed that when using v-for and v-if together with data value of [], it doesn't seem to work. For example: ts: [] <div v-for="t in ts" :key="t" v-if="ts.length"> ...

There was an unhandled type error stating that "undefiened" is not a function while processing a JSON

Hey there! I'm currently using JSON to send a list of songs to populate my table. The JSON response is working fine up until the controller URL. However, when I attempt to loop through it and display the details in my table, I encounter an error. $( ...

Executing Bower installation within a corporate proxy network

Encountering Error : ECONNREFUSED Request to https://bower.herokuapp.com/packages/bootstrap-datepicker failed: connect ECONNREFUSED while attempting Bower Install from Package Manager Console. I came across suggestions in a different discussion on how to ...

"Identifying the exact number of keys in a JSON object using

Is there a key in the JSON data that may or may not exist? How can I determine the total number of occurrences of this key using jQuery? JSON : jasonData = [{"test":"sa3"},{"test":"4s"},{"acf":"1s"},{"test":"6s"}]; I need assistance with implementing th ...

Issue with toggling options in q-option-group (Vue3/Quasar) when using @update:model-value

I'm a newcomer to the world of Quasar Framework and Vue.js. I recently tried implementing the q-option-group component in my simple application but encountered an issue where the model-value and @update:model-value did not toggle between options as ex ...

Utilizing web components from NPM packages in conjunction with Svelte

My current project involves the development of a simple Single Page App (SPA) using Svelte. I have successfully implemented a basic layout and styling, as well as an asynchronous web request triggered by a button click. Now, my next objective is to utiliz ...

Nested ajax requests using jquery

Take a look at this piece of javascript/jquery code: $('#button').click(function() { $.get("php/doit.php?id=<? echo $r['id']; ?>", function(html) { alert(html); // $.get("php/doit.php?id=<? echo $r ...

Monitoring the initiation and completion of web requests within the Ionic framework

Currently utilizing the ionic framework in conjunction with Angular JS. In need of assistance on how to monitor the initiation of a web request. To handle the completion of a request, I have created a directive with an onLoad attribute. Here is the exam ...

Tips for extracting text from a textarea while retaining newline characters:

When using jquery, my goal is to retrieve the text from a textarea element with new lines represented as \n instead of br tags. However, I encountered an issue where Firefox debugger does not display the \n or br characters when I select it and r ...

Unique column arrangement specifically designed for the initial row within the loop

My webpage features a layout that showcases 4 images on each row. However, I am looking to create a special first row with a unique column configuration compared to the rest of the rows. Here is an example of what I have in mind: https://i.sstatic.net/Rs ...

How can you use Firestore to filter documents based on their presence in another collection?

For instance, I am looking to retrieve all users who are members of a certain "space". Here is a simplified Firestore rule example: match /users/{userId} { allow read: if exists(/databases/$(database)/documents/spaces/SPACEID/members/$(userId)); } Java ...