ExtJS zone de liste déroulante liste déroulante largeur plus large que la zone de saisie de la largeur?

Est-il possible de définir la largeur d'un ExtJS (version 4) zone de liste déroulante du menu déroulant pour être plus large que celui de la réelle zone de saisie?

J'ai un comboxbox que je veux être autour de 200px, mais j'ai d'échange sur les résultats de la liste déroulante et que la largeur est même pas assez grand pour montrer à tous la pagination de la barre des commandes.

Voici mon code pour créer le combo:

var add_combo = Ext.create('Ext.form.field.ComboBox', 
    {
        id              : 'gbl_add_combo',
        store           : Ext.create('Ext.data.Store',
        {
            remoteFilter : true,
            fields : ['gb_id', 'title'],
            proxy  : 
            {
                type        : 'ajax',
                url         : 'index.php/store/get_items',
                reader      : 
                {
                    type            : 'json',
                    root            : 'records',
                    totalProperty   : 'total',
                    successProperty : 'success'
                },
                actionMethods : 
                {
                    read    : 'POST',
                    create  : 'POST',
                    update  : 'POST',
                    destroy : 'POST'
                }
            }
        }),
        listConfig:
        {
            loadingText: 'Searching...',
            emptyText: 'No results found'
        },
        queryMode       : 'remote',
        hideLabel       : true,
        displayField    : 'title',
        valueField      : 'gb_id',
        typeAhead       : true,
        hideTrigger     : true,
        emptyText       : 'Start typing...',
        selectOnFocus   : true,
        width           : 225,
        minChars        : 3,
        cls             : 'header_combo',
        pageSize        : 15
    });
  • montrez votre extrait de code
  • ajouté mon code à la question
InformationsquelleAutor Bill Dami | 2011-05-30
  1. 36

    Il y a deux parties. Tout d'abord, vous devez définir matchFieldWidth: false dans votre zone de liste déroulante config. Vous pouvez ensuite spécifier la largeur des attributs dans la listConfig section de style juste la liste déroulante, tout en spécifiant la largeur de la zone de liste déroulante dans la configuration principal.

    Ceci diffère de la version précédente, qui vous permettent de spécifier le listWidth propriété.

    • parfait, merci!
    • Merci pour le partage de l'info Simon.
    • Salut Simon, j'ai appliqué cette solution, et si elle a permis une plus grande largeur pour le modèle, mais alors la liste de valeurs n'est pas maintenant affichées. J'ai posté la question ici - stackoverflow.com/questions/7526232/... - pourriez-vous guider à ce si toute idée. Merci à l'avance.
    • Je veux la liste de la largeur de réglage automatique de la largeur de l'entrée la plus longue dans le combo magasin. Cela fonctionne lorsque je utiliser la largeur: "auto", mais la liste est aussi plus étroite que la zone de liste déroulante quand les entrées sont plus courts. Est-il possible que je peux configurer le minWidth de la liste à la largeur de son parent et d'obtenir l'auto pour fonctionner uniquement dans le cas où les entrées sont de plus?
    • Et, si vous développez pour IE9 trop. Lorsque vous définissez matchFieldWidth de faux et d'omettre un maxWidth dans le listConfig, IE9 permettra à la liste déroulante de la liste liée à occuper toute la largeur. La Solution est de fournir un certain nombre de listConfig.maxWidth.
    InformationsquelleAutor Simon Elliston Ball
  2. 5

    Je n'ai pas trouver de moyen de changer " matchFieldWidth la propriété de façon dynamique. J'ai donc trouvé une autre solution:

     {
   xtype: 'combobox',
   fieldLabel: 'Short Options',
   queryMode: 'local',
   store: ['Yes', 'No', 'Maybe'],
   matchFieldWidth: false,
   listConfig: {
     listeners: {
       beforeshow: function(picker) {
         picker.minWidth = picker.up('combobox').getSize().width;
       }
     }
   }
 }

    Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth

    InformationsquelleAutor Alex Dzeiko