1
我是Sencha的新手,試圖實現一個Sencha窗體,其中包含一個字段用於從商店中的對象列表中進行選擇。這似乎是一個足夠基本的模式,必須有一個簡單的解決方案。我有一個定義的AJAX端點返回名稱/ ID對的JSON陣列(地方)的模型:表單字段從商店中的對象列表中挑選
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()是正確的方式。