Extjs 스토어에서 콤보 박스로드

Question

내 콤보 박스를 Store에서 Panel로로드하려고합니다. "

[ { :

이

{ xtype: 'combo', 
    fieldLabel: 'Farbe', 
    name: 'farbe', 
    store: colors , 
    queryMode: 'local', 
    displayField: 'name', 
    valueField: 'id' } 

loadFromDatabase.php 내 아약스 요청의 응답은 다음과 같습니다

var colors = new Object(); 

Ext.onReady(function(){ 

colors = Ext.create('Ext.data.Store', { 
    fields: ['id', 'name'], 
    autoLoad: true, 
    proxy: { 
     type: 'ajax', 
     url: 'app/view/main/loadFromDatabase.php', 
     reader: { 
      type: 'json', 
      rootProperty: 'name' 
     } 
    }, 
}); 

색상은이 같은 내 패널에서 나중에 조금을로드 할 id ":"1 ", "이름 ":"빨간색 " }, { "id ":"2 ", "이름 ":"파란색 " }, { "ID": "3", "이름": "녹색"}]

이 유효한 JSON처럼 보인다.

하지만 콤보 상자를 클릭하면 상자가 비어 있습니다. 뭐가 문제 야?

Answer 1

내가

내가이 솔루션은 다른 더 나은 다음 알고하지는 타 솔루션을 발견하지만, 작동 :)

var colorsFromDB = []; 

var colors = Ext.create('Ext.data.Store', { 
    id: "colors", 
    fields: ['id', 'name'], 
    data : colorsFromDB 
}); 

Ext.Ajax.request({ 
    url: "app/view/main/loadFromDatabase.php", 
    method: 'POST', 
    success: function(r) { 
     var res = Ext.decode(r.responseText); 
     if (res !== null) { 
      Ext.each(res.colors, function(obj) { 
       colorsFromDB.push({ 
        id: obj.id, 
        name: obj.name 
       }) 
      }); 
      colors.loadData(colorsFromDB); 
     } 
    }, 
    failure: function(r) { 
     console.log(r.responseText); 
    } 
}); 

Answer 2

귀하의 JSON은 아래의 다음

'items': [{ 
       'name': 'Lisa', 
       "email": "lisa@simpsons.com", 
       "phone": "555-111-1224" 
      }, { 
       'name': 'Bart', 
       "email": "bart@simpsons.com", 
       "phone": "555-222-1234" 
      }, { 
       'name': 'Homer', 
       "email": "home@simpsons.com", 
       "phone": "555-222-1244" 
      }] 

var myStore = Ext.create('Ext.data.Store', { 
    fields:['name','email','phone'], 
    proxy: { 
     type: 'ajax', 
     url: '/yourpath.json', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    }, 
    autoLoad: true 
}); 

그래서 당신은 객체의 배열과 키로 JSON을하고있는 그 키를 지정해야 당신이 상점을 지정할 수 있습니다 같아야합니다 root 속성은 reader입니다. 일반 상점에서는 rootProperty 속성도 없습니다.

희망이 도움이됩니다.

Answer 3

이 콤보에 이러한 추가 :

listeners : { 
    added : function(tis) { 
      tis.getStore().load(); 
    } 
} 

과 상점에 추가 할 :

listeners : { 
    load : function() { 
      Ext.getCmp('yourcomboid').setValue(Ext.getCmp('yourcomboid').getValue()); 
    } 
} 

마침내

은, 제 2의 로딩을 방지하기 위해, 콤보에 다음을 추가

mode : 'local' 

전체 코드 :

{ 
    xtype : 'combo', 
    fieldLabel : 'Role Selection', 
    id : 'role', 
    hiddenName : 'role', 
    hiddenValue : 1, 
    editable : false, 
    emptyText : 'Please select a role', 
    typeAhead : true, 
    triggerAction : 'all', 
    lazyRender : true, 
    mode : 'local', 
    listeners : { 
     added : function(
       tis) { 
      tis.getStore().load(); 
     } 
    }, 
    store : new Ext.data.JsonStore(
      { 
       url : 'getRole', 
       listeners : { 
        load : function() { 
         Ext.getCmp('role').setValue(Ext.getCmp('role').getValue()); 
        } 
       }, 
       fields : ['id','name' ], 
       root : 'resultList', 
      }), 
    displayField : 'name', 
    valueField : 'id' 
}