2012-10-03 39 views
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()是正確的方式。

回答

0

選取器插槽有一個數據配置,它是一個對象數組。它應該有一個具有文本和價值的特定格式。

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

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