1

我是 Sencha 的新手，试图实现一个 Sencha 表单面板，其中包含一个从商店中的对象列表中选择的字段。这似乎是一个足够基本的模式，必须有一个简单的解决方案。我有一个模型，它定义了一个返回名称/id 对的 json 数组（位置）的 ajax 端点：

Ext.define('MyApp.model.Place', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'name', type: 'string'},
            {name: 'id', type: 'int'},
        ],
        proxy: {
            type: 'ajax',
            url: '/m/places/',
            reader: {
                type: 'json',
                rootProperty: 'places',
            },
        },
    },
});

还有一家商店：

Ext.define('MyApp.store.Place', {
    extend: 'Ext.data.Store',
    requires: ['MyApp.model.Place'],
    config: {
        model: 'MyApp.model.Place',
        autoLoad: true,
        sorters: [
            {
                property : 'name',
                direction: 'ASC',
            },
        ],
    },
});

我想要一个用于地名的只读文本字段和一个用于提交地点 ID 的隐藏字段：

{
    xtype: 'textfield',
    name: 'place_name',
    label: 'Place',
    readOnly: true,
    listeners: {
        focus: function () {
            var place_picker = Ext.create('Ext.Picker', {
                slots: [
                    {
                        name: 'place_name',
                        title: 'Choose a Place',
                        store: Ext.create('MyApp.store.Place'),
                        itemTpl: '{name}',
                        listeners: {
                            itemtap: function (obj, index, target, record, e, eOpts) {
                                var form = Ext.getCmp('entityform');
                                form.setValues({
                                    place_name: record.get('name'),
                                    place_id: record.get('id'),
                                });
                                // how to dismiss the picker?
                                obj.parent.hide();
                            },
                        },
                    },
                ]
            });
            Ext.Viewport.add(place_picker);
            place_picker.show();
        },
    },
},
{
    xtype: 'hiddenfield',
    name: 'place_id',
},

此时，点击该字段会导致选择器从底部向上滑动并显示加载动画，但它没有被地名列表填充，尽管我可以看到 ajax 请求已经发出并且它已经返回了预期的 json 文档。

我会在这里停下来问问我是否走在正确的轨道上，还是有更好的方法？

为什么选择器没有填充 ajax 请求的结果？我对 itemTpl 的使用不正确吗？

我是否以适合 sencha 的方式设置表单字段？

我应该如何关闭 itemtap 上的选择器？我不知何故怀疑我使用 hide() 是正确的方法。

4

1 回答 1

0

选择器插槽有一个数据配置，它是一个对象数组。它应该具有带有文本和值的特定格式。

slots :[
    data : [{
text : someValue,
value : someValue1,}] ]

您需要将具有字段文本和值的对象添加到插槽。

于 2012-10-11T06:59:02.590 回答