DataView cache la fonte ComboBox

Question

J'ai posté cela sur les forums Ext il y a quelques jours, mais aucune réponse, alors peut-être une meilleure chance ici.

J'ai actuellement une zone de liste déroulante chargement des données de php par ajax. Tout fonctionne bien sauf que lorsque mes résultats sont retournés, le DataView couvre la ComboBox (fig 2.) J'ai inclus le code approprié ci-dessous, donc toute aide serait grandement appréciée.

Je peux me tromper, mais je pense que j'ai éliminé les problèmes CSS, car l'élément DataView est rendu avec une position absolue.

alt text http://img.skitch.com/20100216-8t4pmbc3e6mydqqrac9qm9ucj.jpg

fig 1.

alt text http://img.skitch.com/20100216-n5t44g8rua7fawkwjrj49fk7t4.jpg

fig 2.

var dataStore = new Ext.data.JsonStore({ 
    url: '/ajaxGateway.php', 
    root: 'data', 
    baseParams: { 
     useClass: 'App_GeoIP_GeoIP', 
     useMethod: 'getLocationsStartingWith' 
    }, 
    fields: [ 
      {name:'text', mapping:'TITLE'}, 
      {name:'stateName', mapping:'STATE_NAME'}, 
      {name:'regionHierarchy', mapping:'REGION_HIERARCHY'}, 
      {name:'id', mapping:'ID', type:'int'}, 
      {name:'lat', mapping:'LATITUDE', type:'float'}, 
      {name:'lng', mapping:'LONGITUDE', type:'float'} 
      ] 
}); 

_

var resultTpl = new Ext.XTemplate(
    '<tpl for="."><div class="search-item" style="text-align:left">', 
    '<span>{text}, <small>{stateName}</small></span>', 
    '</div></tpl>' 
); 

_

var locationBasedRulesTree = new Ext.tree.TreePanel({ 
    title: 'Location Based Regions', 
    height: 329, 
    width: 480, 
    autoScroll: true, 
    useArrows: true, 
    animate: false, 
    rootVisible: false, 
    frame: true, 
    enableDrag: true, 
    root: new Ext.tree.AsyncTreeNode({ 
     id:'custom_root' 
    }), 
    tbar: new Ext.Toolbar(), 
    listeners: 
    { 
     listenersHandlers...: function(){} 
    } 
}); 

_

locationBasedRulesTree.getTopToolbar().addField(
    new Ext.form.ComboBox({ 
     store: dataStore, 
     displayField: 'text', 
     typeAhead: false, 
     loadingText: 'Finding...', 
     blankText: "Search for a Place...", 
     width: (Ext.isIE6) ? 155:200, 
     hideTrigger: true, 
     forceSelection: true, 
     selectOnFocus:true, 
     tpl: resultTpl, 
     itemSelector: 'div.search-item', 
     enableKeyEvents: true, 
     onSelect: function(record) 
     { 
      selectHandler...(); 
     }, 
     listeners: 
     { 
      keypress : function(comboBox, event) { 
       keypressHandler...(); 
      } 
     } 
    }) 
); 

Answer 1

Difficile à dire. La première chose que je ferais est d'extraire la zone de liste déroulante de votre mise en page et essayer de le rendre à une page vierge et voir si vous avez toujours ce problème (devrait être simple à faire). Cela confirmera ou exclura immédiatement que cela est lié à votre mise en page particulière. Vous n'avez pas non plus mentionné si cela se produisait uniquement dans des combinaisons de navigateur/système d'exploitation particulières - dans ce cas, il pourrait s'agir d'un bug Ext. Si cela se produit dans n'importe quel navigateur, c'est probablement un problème avec votre mise en page. Essayez de le réduire d'abord, puis peut-être que ce sera plus évident où aller ensuite.

Answer 2

Il semble presque que les paramètres listAlign ou hideParent soient incorrects. Je ne vois pas cela dans votre définition, mais je revérifierais ... essayez de les configurer manuellement. J'ai également eu des problèmes avec IE en ne définissant pas la propriété listWidth config.