Sencha textfield xtype 접근하기

Ext.define('Home.view.main.MyPage', {
    extend: 'Ext.form.Panel',
    alias: 'widget.mypage',

    items: [
        {
            xtype: 'textfield',
            itemId: 'name',
            name: 'name',
            fieldLabel: 'Name',
            allowBlank: false,
            // Can't directly call test() here, value will be set later
        }
    ],

    listeners: {
        afterrender: function(form) {
            // Set the value of the 'name' field after render
            form.down('#name').setValue(form.getController().test());
        }
    },

    controller: {
        // The test() function returns the value you want to set to the 'name' field
        test: function() {
            return '1';  // The value to set in the 'name' field
        }
    }
});

itemId으로 접근하기

// Access the component by its itemId
var nameField = Ext.ComponentQuery.query('#name')[0];

name 속성으로 접근하기

// Access the component by its name
var nameField = Ext.ComponentQuery.query('textfield[name=name]')[0];

값 정보 다루기

// 값 가져오기
var value = nameField.getValue();
console.log(value);

// 값 셋팅하기
nameField.setValue('New Value');

// 유효성 체크
console.log(nameField.isValid());

xtype 목록 가져오기

var allTextFields = Ext.ComponentQuery.query('textfield');
console.log(allTextFields); // List all textfields in the app

// Alternatively, print each component individually with a loop
allTextFields.forEach(function(field, index) {
    console.log('Field ' + index + ':', field);
});

console.table(allTextFields, ['itemId', 'name', 'value']);  // Display itemId, name, and value of each field

console.table(allTextFields, ['itemId', 'name', 'value']);의 결과

[
    { itemId: 'name', name: 'name', value: 'John' },
    { itemId: 'email', name: 'email', value: 'john@example.com' },
    ...
]