Data Binding для вида Ext.grid.property.Grid
 

Здравствуйте!

Пытаюсь связать данных из модели с таблицей propertygrid. Сам биндинг работает, заголовок таблицы выводится. А вот содержимое таблицы почему-то не выводится.

Как это исправить?

Код в песочнице https://fiddle.sencha.com/#fiddle/me0

Ext.onReady(function() {

Ext.define('TestViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.test', 

    data: {
        title: "Биндинг работает",
        source: {
            '(name)': 'Property Grid',
            grouping: false,
            autoFitColumns: true,
            productionQuality: true,
            created: new Date(),
            tested: false,
            version: 0.8,
            borderWidth: 2
    	}
    }
});    
    
    
Ext.define('TestView', {
    extend: 'Ext.grid.property.Grid',
    
    

    viewModel: {
        type: 'test'  
    },

    bind: {
        title: '{title}',
        source: '{source}'
    }

    
});    

    
    Ext.create('TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
    
});

Дык, во вьюмодели нужно наверное указать стор. PropertyGrid использует PropertyStore:

// Create a property.Store from the source object unless configured with a store
        if (!me.store) {
            me.propStore = me.store = new Ext.grid.property.Store(me, me.source);
        }

http://docs.sencha.com/extjs/5.1/5.1...-initComponent

Хотя нет. Не в этом дело.

А это, оказывается, известный баг:

https://www.sencha.com/forum/showthread.php?300024

Баг? Ну ясно... ладно, сам подправлю позже. А почему они не дают доступ к своему форуму? Ужа давно хочу туда попасть. Читать можно, писать - нет прав доступа.

Вот такая версия работает:

Код в песочнице: https://fiddle.sencha.com/#fiddle/me0

Теперь вопрос, как связаться с sourceConfig?

Ext.onReady(function() {

    Ext.define('TestViewModel', {
        extend: 'Ext.app.ViewModel',
    
        alias: 'viewmodel.test', 
    
        data: {
            title: "Биндинг работает",
            source: {
                    created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
                    available: false,
                    version: 0.01,
                    description: "A test object"
            },
            sourceConfig: {
                created: {displayName: "Создано"},
                available: {displayName: "Доступно"},
                version: {displayName: "Версия"},
                description: {displayName: "Описание"}
            }
        }
    });    
        
        
    Ext.define('TestView', {
        extend: 'Ext.grid.property.Grid',
        
        viewModel: {
            type: 'test'  
        },
    
        bind: {
            title: '{title}',
            //source: '{source}'
            
            source: {
                    created: "{source.created}",
                    available: "{source.available}",
                    version: "{source.version}",
                    description: "{source.description}"
                }
        }
    });    
    
    Ext.create('TestView', {
        renderTo: Ext.getBody(),
        width: 400
    });
    
});

Чтобы связать sourceConfig пришлось делать производный класс. Но он тоже не работает из-за вышеупомянутого бага.

В общем выкрутился вот таким способом:

currentSource: Ext.define("random" + Math.random(), {
			data: {
				created: Ext.Date.parse('10/10/2006', 'm/d/Y'),
				available: false,
				version: 0.01,
				description: "A test object"
			},
			config: {
				created: {
					displayName: "Создано"
				},
				available: {
					displayName: "Доступно"
				},
				version: {
					displayName: "Версия"
				},
				description: {
					displayName: "Описание"
				}
			}
}).prototype

1) для учета sourceConfig придется создавать производный класс
2) для того, чтобы биндились объекты придется объекты оборачивать в

Ext.define("random" + Math.random(), {<здесь сам объект>}).prototype

либо вместо такой обертки можно сделать специальный класс и оборачивать в него, а не плодить толпу таких вот времянок.

Это до поры пока не исправят багу.

П.С. Пробовал оборачивать в new Object() - не помогло. Часть членов ломаются все равно. Если есть по-экономнее обертка - прошу сообщить)