¿Por qué no puedo hacer que un Combobox simple funcione en EXTjs 4 usando un JSONStore?

Esto me está volviendo loco. Tengo un archivo JS que es:

  Ext.onReady(function(){
     Ext.QuickTips.init();

     var SitesStore = new Ext.data.JsonStore({
        autoLoad: true,
        fields: [{
           name: 'id',
           mapping: 'id'
        }, {
           name: 'name',
           mapping: 'name'
        }],
        proxy: {
           type: 'ajax',
           url : '/sites/getsites.do'
        },
        storeId: 'SitesStore',
        root: 'sites',
        url: '/sites/getsites.do',
        xtype: 'jsonstore'
     });

     SitesStore.load(function(data){
        Ext.create('Ext.form.ComboBox', {
           fieldLabel: 'Choose Site...',
           store: SitesStore,
           data: data[0].raw["sites"],
           queryMode: 'remote',
           displayField: 'name',
           valueField: 'id',
           renderTo: "timesheetSearch"
        });

        console.log(data[0].raw["sites"]);
     });

  }); //end onReady

My /sites/getsites.do devoluciones JSON datos en el siguiente formato:

{
    -sites: [
        -{
            id: "12345678"
            name: "Blah Warehouse"
        },
        -{
            id: "5999B91DF6C0"
            name: "WalMart Warehouse"
        },
        ...
}

Me doy cuenta de la data[0].raw["sites"] probablemente no sea la forma preferida de acceder a los datos, pero confirmo que los datos se están rellenando y estoy recuperando 136 sites.

La combobox HA hacer. Sin embargo, la búsqueda en vivo no funciona y no hay entradas.

Soy nuevo en ExtJS.

Cualquier consejo sería apreciado.

Muchas Gracias

ACTUALIZACIÓN

Este código OBRAS

var SitesStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id','name'],
    data: [{'id':'aaaa', 'name':'Honeywell'}],
    storeId: 'SitesStore',
    root: 'sites'
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Site...',
    store: SitesStore,
    queryMode: 'remote',
    displayField: 'name',
    triggerAction: 'all',
    valueField: 'id',
    renderTo: "timesheetSearch"
});

Esto hace NO

var SitesStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id','name'],
    proxy: {
        type: 'ajax',
        url: '/sites/getsites.do'
    },
    storeId: 'SitesStore',
    root: 'sites'
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Site...',
    store: SitesStore,
    queryMode: 'remote',
    displayField: 'name',
    triggerAction: 'all',
    valueField: 'id',
    renderTo: "timesheetSearch"
});

Cuando lo ejecuto sin un proxy (y especifique un url) Recibo un error que dice que no especifiqué un proxy.

Muchas Gracias

ACTUALIZACIÓN

UGH !!!!!!

Lo tengo. Aquí está el correcto JSONStore

var SitesStore = Ext.create('Ext.data.Store', {
    autoLoad: true,
    fields: ['id','name'],
    proxy: {
        type: 'ajax',
        url: '/sites/getsites.do',
        reader: {
            type:'json',
            root: 'sites'
        }
    },
    storeId: 'SitesStore',
    root: 'sites'
});

Gracias a todos. No podía creer lo difícil que era esto. Principalmente porque no pude encontrar un buen tutorial. jajaja

preguntado el 16 de mayo de 11 a las 18:05

2 Respuestas

ACTUALIZACIÓN

Pude resolver esto. Aquí está el código de trabajo:

var SitesStore = Ext.create('Ext.data.Store', {
     autoLoad: true,
     fields: ['id','name'],
     proxy: {
        type: 'ajax',
        url: '/sites/getsites.do',
        reader: {
           type:'json',
           root: 'sites'
        }
     },
     storeId: 'SitesStore',
     root: 'sites'
  });

  Ext.create('Ext.form.ComboBox', {
     fieldLabel: 'Choose Site...',
     store: SitesStore,
     queryMode: 'remote',
     displayField: 'name',
     triggerAction: 'all',
     valueField: 'id',
     renderTo: "timesheetSearch"
  });

Nunca pude hacer que JSONStore funcionara, así que creé un estándar Store y tenía que coincidir con el reader atributo con mi JSON datos.

Espero que esto ayude a alguien.

contestado el 17 de mayo de 11 a las 00:05

Eso es un poco sucio y mis primeras líneas ExtJS4 (estoy acostumbrado a v2.x / 3.x) pero debería funcionar. Como veo, usa un navegador con consola, por lo que podrá depurar si hay algunos errores. También deberías echar un vistazo a la API

 var SitesStore = new Ext.data.JsonStore({
    autoLoad: true,
    fields: [{
       name: 'id',
       mapping: 'id'
    }, {
       name: 'name',
       mapping: 'name'
    }],
    proxy: {
       type: 'ajax',
       url : '/sites/getsites.do'
    },
    storeId: 'SitesStore',
    root: 'sites',
    url: '/sites/getsites.do'
    // ,xtype: 'jsonstore'
 });

  Ext.onReady(function(){
     Ext.QuickTips.init();


    Ext.create('Ext.form.ComboBox', {
       fieldLabel: 'Choose Site...',
       store: SitesStore,
       // data: data[0].raw["sites"],
       queryMode: 'remote',
       displayField: 'name',
       valueField: 'id',
       renderTo: "timesheetSearch",
       listeners:{
            scope: this,
            'select': function(field, value){
                console.log(value);
            }
        }

    });
  });

contestado el 17 de mayo de 11 a las 00:05

Gracias, pero esto todavía no funciona. He mirado la API. De hecho, ese enlace de API que envió realmente funciona. Pero mi jsonstore no lo hace. - cbmeeks

@cbmeeks ok, usa firebug para depurar la tienda. Debería cargarse la vez que haga clic en el combo. Puede usar los eventos de la tienda o el evento comboBox para depurar esto. - SRA

OK, miré Chrome y cuando hago clic en el menú desplegable, DO obtener una 200 OK y el JSON esta ahí. - cbmeeks

Sí, eso creo. Puede hacer la mayoría con console.log () Publique su instancia de tienda después de que se cargue y eche un vistazo al contenido. Quizás esté realmente vacío. Y creo que no necesita un mapeo en los campos de la tienda si el nombre del campo es el mismo: SRA

Gracias. Pero he confirmado que SitesStore de hecho carga datos - cbmeeks

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.