CODEWITHSUNDEEP
listviewextjssencha-touchdataitem
seppy
seppy

Reputation: 11

Sencha Touch 2: Component DataItem, getRecord() in listitems

i try to build an list with useComponents activated. So far it works fine. The datarecord 'internal_state' which i will represent with togglefield does not contain "0" or "1" as value, but "on" or "off". So i tried to extend the apply method and check the current value with

this.getRecord().get('internal_state')

But in all cases the result ist null. Anybody with an approach? In this way i will have to mainpulate the core data before displaying in many cases.

My list for devices look as follows:

Ext.define('HomeBox.view.DeviceListView', {
extend: 'Ext.dataview.List',
xtype: 'devicelist',
requires: [
    'Ext.plugin.PullRefresh',
    'HomeBox.view.DeviceListItemView'
],
config: {
    useComponents: true,
    defaultType: 'devicelistitem',
    useHeaders: false,
    plugins: [
        { xclass: 'Ext.plugin.PullRefresh' }
    ]
}

});

and the item view:

Ext.define('HomeBox.view.DeviceListItemView', {
extend: 'Ext.dataview.component.DataItem',
requires: [
    'Ext.field.Toggle'
],
xtype: 'devicelistitem',
config: {
    layout: 'hbox',
    styleHtmlContent: true,
    DeviceName: {
        flex: 1,
        tpl: '{.}',
        data: ''
    },
    DeviceToggle: {
        flex: 2
    },
    dataMap: {
        getDeviceName: {
            setData: 'Name'
        },
        getDeviceToggle: {
            setValue: 'internal_state'
        },
    }
},
applyDeviceName: function(config) {
    return Ext.factory(config, Ext.Component, this.getDeviceName());
},
updateDeviceName: function(newName, oldName) {
    if (newName) {
        this.add(newName);
    }

    if (oldName) {
        this.remove(oldName);
    }
},
applyDeviceToggle: function(config) {
    return Ext.factory(config, Ext.field.Toggle, this.getDeviceToggle());
},
updateDeviceToggle: function(newOne, oldOne) {
    if (newOne) {
        this.add(newOne);
    }

    if (oldOne) {
        this.remove(oldOne);
    }
},

});

Upvotes: 1

Views: 410

Answers (1)

Dinkheller
Dinkheller

Reputation: 5074

extend a custom toggle field from Ext.field.Toggle and add

setValue: function(newValue) {
    if (newValue === 'on') {
        newValue = 1;
    }

    var oldValue = this.getValue();
    if (oldValue != newValue) {
        this.getComponent().setValue(newValue);

        this.fireEvent('change', this, newValue, oldValue);
    }

    return this;
},

getValue: function() {
    return (this.getComponent().getValue() == 'on') ? 1 : 0;
},

Upvotes: 0

Related Questions