Question

鉴于以下面板派生的extjs组件的定义，如何声明我可以设置的其他实例范围属性，获取和添加更改事件？

我试图在配置（startIndex和endIndex）中将它们内联添加，导致它们在onContactsLoaded中引用时为null。我正在使用extjs beta 5.0，它允许viewmodels。虽然在它，有没有更好的方法来引用this.getViewModel（）。getData（）。groupData.Id，也许像this.getViewModel（）。get（'groupData.Id'）？

Ext.define('MyApp.view.ContactCarouselView', {
    extend: 'Ext.panel.Panel',
    xtype: 'contactcarousel',
    requires: ['Ext.container.Container', 'Ext.button.Button', 'Ext.Img', 'MyApp.store.ContactStore'],

    height: 71,
    width: 12 * 68,
    title: '',
    cls: 'carousel',
    bodyStyle: {},
    layout: {
        type: 'hbox',
        align: 'stretch'
    },

    startIndex: 0,
    endIndex: 7,  

    viewModel: {},
    listeners: {
        afterrender: function (panel) {
            var me = this;          

        },
        refresh: function () {

        }
    },
    onContactsLoaded: function (contactStore) {
        var carousel = this;
        var imageHolder = carousel.down('#imageHolder');
        var index = 0;
        //debugger;
        carousel.startIndex = 0;
        carousel.endIndex = 7;
        Ext.each(contactStore.data.map[contactStore.currentPage].value, function (rec) {
            //contactStore.each(function (rec) {
            imageHolder.add({
                xtype: 'image',
                cls: 'contact-picture',
                viewModel: { data: rec.data },
                width: 68, height: 68,
                bind: { src: '{PhotoUrl}' }
            });
        });

    },
    items:
        [
            {
                xtype: 'container',
                flex: 1,
                layout: {
                    type: 'hbox',
                    align: 'stretch'

                },
                items: [{
                    xtype: 'button',
                    width: 30,
                    cls: 'left-button',
                    text: 'MyButton',
                    listeners: {
                        click: function () {
                            //put one more pic to the left and remove one from the right
                            var ih = this.up().down('#imageHolder');
                            var carousel = ih.up();
                            carousel.startIndex--;
                            carousel.endIndex--;
                            ih.scrollBy(-68, 0, true);
                        }
                    }

                }, {
                    xtype: 'panel', cls: 'images-area', layout: 'hbox', flex: 1, itemId: 'imageHolder'
                }, {
                    xtype: 'button',
                    cls: 'right-button',
                    width: 30,
                    text: 'MyButton', listeners: {
                        click: function () {
                            //put one more pic to the right and remove one from the left
                            debugger;
                            var ih = this.up().down('#imageHolder');
                            var carousel = ih.up();
                            carousel.startIndex++;
                            carousel.endIndex++;
                            ih.scrollBy(68, 0, true);
                        }
                    }
                }]
            }, {
                xtype: 'container'
            }],
    initComponent: function () {

        var me = this;
        me.callParent(arguments);

        var imageStyle = {};
        debugger;

        var store = Ext.create('MyApp.store.ContactStore', {
            pageSize: 8, viewSize: 8, leadingBufferZone: 8,
            trailingBufferZone: 8,
        });
        this.store = store;

        store.on('load', this.onContactsLoaded, this, {
            //single: true
        });

        store.loadPage(1,
            {

                params: { groupId: this.getViewModel().getData().groupData.Id }

            });



    }

});

Answer 1

看到这个问题的Sencha小提琴会有所帮助吗？关于您添加到自定义类的配置对象/值，我毫无疑问会在配置中执行此操作（特别是如果您希望为您创建setter和getter）。来自ExtJS 5 documentation：

 Ext.define('My.sample.Person', {
    config: {
        name: 'Mr. Unknown',
        age: 0,
        gender: 'Male'
    },

    constructor: function(config) {
        this.initConfig(config);
        return this;
    }

  // ...
});

如果您希望快速绑定到ViewModel，我建议您在组件中添加一个新配置，例如上面的配置，并将其绑定到您的组件中：

config: {
    groupDataId:null
},
bind: {
   dataId: '{data.groupDataId.id}' // or '{groupDataId.id}'
}

然后您可以使用以下方法访问该值：

this.getGroupDataId()

在组件中声明实例范围自定义属性的推荐方法

1 个答案: