Sencha grid column의 default값 설정

2024. 12. 25. 16:44Javascript/Sencha

Model에 정의하기

Ext.define('MyApp.model.MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int', defaultValue: 25 }, // Default value
        { name: 'city', type: 'string', defaultValue: 'Unknown' } // Default value
    ]
});

Model 이벤트에 적용하기

const store = Ext.create('Ext.data.Store', {
    fields: ['name', 'age', 'city'],
    data: [
        { name: 'John', age: 30, city: 'New York' },
        { name: 'Jane', age: 28 }, // Missing 'city', defaults to 'Unknown'
        { name: 'Bob' } // Missing 'age' and 'city', use defaults
    ],
    listeners: {
        add: function(store, records) {
            records.forEach(record => {
                if (!record.get('age')) record.set('age', 25); // Default age
                if (!record.get('city')) record.set('city', 'Unknown'); // Default city
            });
        }
    }
});

컬럼의 이벤트에 적용하기

{
    text: 'City',
    dataIndex: 'city',
    renderer: function(value) {
        return value ? value : 'Unknown'; // Default value
    }
}