Ext.define('uas.view.List', {
    extend: 'Ext.view.BoundList',
    xtype: 'listview',

    displayField: 'display',
    valueField: 'value',

    renderTpl: [
        '<div id="{id}-listWrap" data-ref="listWrap"',
        ' class="{baseCls}-list-ct ',
        Ext.dom.Element.unselectableCls,
        '">',
        '<tpl if="title">',
        '<div class="',
        Ext.baseCSSPrefix,
        'list-header">',
        '<span class="',
        Ext.baseCSSPrefix,
        'list-header-title">{title}',
        '</span>',
        '</div>',
        '</tpl>',
        '<ul id="{id}-listEl" data-ref="listEl" class="',
        Ext.baseCSSPrefix,
        'list-plain"',
        '<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>',
        '>',
        '</ul>',
        '</div>',
        '{%',
        'var pagingToolbar=values.$comp.pagingToolbar;',
        'if (pagingToolbar) {',
        'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
        '}',
        '%}',
        {
            disableFormats: true
        }
    ],

    initRenderData: function() {
        var me = this,
            data = me.callParent();
        data.title = me.title;
        return data;
    },

    constructor: function(config) {
        var me = this, cfg = Ext.apply({}, config);
        me.displayField = cfg.displayField || me.displayField;

        if (!cfg.store) {
            cfg.store = new Ext.data.Store({
                fields: [me.displayField],
                data: cfg.data || []
            });
        }
        me.callParent([
            cfg
        ]);
    },

    setListData: function(data) {
        this.store.loadData(data);
    },

    getItemValue: function(item) {
        return item.get(this.valueField);
    }
});