Je suis nouveau à Sencha, en essayant d'implémenter un panneau de formulaire Sencha avec un champ à choisir dans une liste d'objets dans un magasin. Cela semble être un modèle suffisamment basique pour qu'il y ait une solution simple. J'ai un modèle qui définit un point de terminaison ajax renvoyant un tableau JSON (places) de paires nom/id:Champ de formulaire à choisir à partir d'une liste d'objets dans un magasin
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',
},
},
},
});
Et un magasin:
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',
},
],
},
});
Je veux un champ de texte en lecture seule pour la nom de lieu et un champ caché pour soumettre l'ID de lieu:
{
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',
},
à ce stade, tapant sur le champ provoque le sélecteur de glisser vers le haut à partir du bas et afficher l'animation de chargement, mais il n'est pas peuplée avec la liste des noms de lieux, bien que je puisse voir que la requête ajax a été faite et qu'elle a retourné le document json attendu.
Je vais m'arrêter ici et demander si je suis sur la bonne voie ou s'il y a une meilleure approche là-bas?
Pourquoi le sélecteur n'est-il pas rempli avec les résultats de la requête ajax? Mon utilisation de itemTpl est-elle incorrecte? Est-ce que je règle les champs de formulaire d'une manière appropriée à Sencha?
Comment dois-je fermer le sélecteur sur itemtap? Je doute en quelque sorte que mon utilisation de hide() soit la bonne façon.