Construire un TriggerField avec la fenêtre PopUp

Question

J'ai construit un triggerField et quand j'appuie dessus, je veux avoir un popup, qui est ajouté au bouton dans le champ de déclenchement (donc quand je clique ailleurs, il doit disparaître et il doit apparaître sur le bouton quand je clique sur le bouton comme un datepicker-popup)

J'ai réussi à faire quelque chose comme ça avec une fenêtre ext. mais le décalage et la position ne correspond pas.

Tout devrait être dans un éditeur de rangée. mon code:

new Ext.grid.GridPanel({ 
     store: Store, 
     region:'center', 
     height:150, 
     //minWidth:700, 
     autoScroll:true, 
     listeners:{}, 
     plugins:[new Ext.ux.grid.RowEditor()], 
     tbar: [{ 
      iconCls: 'icon-user-add', 
      text: ' hinzufügen', 
      handler: function(){ 
       alert("abc"); 
      } 
     },{ 
      ref: '../removeBtn', 
      iconCls: 'icon-user-delete', 
      text: 'löschen', 
      disabled: true, 
      handler: function(){ 
       editor.stopEditing(); 
       var s = grid.getSelectionModel().getSelections(); 
       for(var i = 0, r; r = s[i]; i++){ 
        store.remove(r); 
       } 
      } 
     }], 
     columns: [{ 
      header: 'Monate', 
      dataIndex: 'MONAT', 
      width: 50, 
      sortable: true, 
      editor: 
       new Ext.form.TriggerField({"id":"EditorMonate",items:[], 
        "onTriggerClick":function(thiss){ 
        if(!Ext.getCmp("autoWMonate")){ 
        var monate=new Ext.Window({"x":Ext.getCmp("EditorMonate").x,closeAction:"hide",width:275,id:"autoWMonate",layout:"table",layoutConfig: {columns: 10}}); 
        var text; 
        for(var mon=1;mon<13;mon++){ 
        text=mon; 
        mon?mon:text="0"; 
        if(mon<10) 
         text="0"+mon; 
          monate.items.add(
new Ext.Button({cls:"x-btn",value:parseInt(text),selected:true,"text":text,id:text 
         }}}));} 
        }    Ext.getCmp("autoWMonate").hidden?Ext.getCmp("autoWMonate").show():Ext.getCmp("autoWMonate").hide(); 
       }}) 
     } 
     }] 
    }) 

Answer 1

Je l'ai fait quelque chose comme ça en regardant le code du sélecteur de date et en généralisant l'idée là - utiliser un composant de menu pour le comportement contextuel, et mettre tout ce que vous aimez en tant que composant contenu par le menu.

Answer 2

Problème sovled avec:

{ 
    header: 'WochenTage', 
    dataIndex: 'WOCHE', 
    width: 100, 
    sortable: true, 
    editor: new Ext.form.TriggerField({ 
    onTriggerClick: function(e) { 
     if (!this.menu) { 
     this.menu = new Ext.menu.Menu({ 
      items:[{xtype:"label",text:"1"},{xtype:"label",text:"2"}] 
      // the items should have event listeners that set the field value accordingly 
     }); 
     } 
     // here you would want to sync the items in the menu with the field value (this.getValue()) 
     // before you show the menu -- keep in mind that the menu and its children might not be rendered yet 
     this.menu.showAt(e.getXY()); // or this.menu.show(this.getEl(), 'tl-bl?'); 
    } 
    }) 
}