Почему я не могу заставить простой Combobox работать в EXTjs 4 с помощью JSONStore? - PullRequest
Новая
       7

Почему я не могу заставить простой Combobox работать в EXTjs 4 с помощью JSONStore?

5 голосов
/ 16 мая 2011

Это сводит меня с ума.У меня есть файл JS: 

  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

Мой /sites/getsites.do возвращает JSON данные в следующем формате: 

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

Я понимаю, что data[0].raw["sites"], вероятно, нетпредпочтительный способ доступа к данным, но я подтверждаю, что данные заполняются, и я возвращаюсь 136 sites.

combobox DOES рендеринга.Тем не менее, поиск в реальном времени не работает, и в нем нет записей.

Я новичок в ExtJS.

Любые советы приветствуются.

Спасибо

ОБНОВЛЕНИЕ

Этот код РАБОТАЕТ 

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"
});

Это НЕ 

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"
});

Когда я запускаю его без proxy (и задаю url), я получаю сообщение о том, что я не указал прокси.

Спасибо

ОБНОВЛЕНИЕ

УХХ !!!!!!

Я понял.Вот правильный 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'
});

Спасибо всем.Не мог поверить, как это было сложно.Главным образом потому, что я не смог найти хороший учебник.лол

Ответы [ 2 ]

1 голос
/ 17 мая 2011

ОБНОВЛЕНИЕ

Я смог понять это.Вот рабочий код: 

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"
  });

Я никогда не мог заставить JSONStore работать, поэтому я создал стандартный Store и должен был сопоставить атрибут reader с моими данными JSON.

Надеюсь, это кому-нибудь поможет.

1 голос
/ 16 мая 2011

Это немного грязно и мои первые строки ExtJS4 (я привык к v2.x / 3.x), но это должно работатьКак я вижу, вы используете браузер с консолью, так что вы сможете отлаживать, если есть какие-то ошибки.Также вам стоит взглянуть на 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);
            }
        }

    });
  });
...