Building a TriggerField with PopUp Window

Question

Hi!

I built a triggerField and when i press at it, i want to have a popup, that is appended to the button in the triggerfield(so when i click anywhere else it shall disappear and it shall pop out up to the button when i click at the button just like a datepicker-popup)

I somehow managed to do something like that with an Ext.window but the offset and postion doesnt match.

This all should be contained in a row editor. my 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

I did something like this by looking at the code of the date picker and generalizing the idea there - use a menu component for the popup behavior, and put whatever you like as a single component contained by the menu.

Answer 2

ty but how can i use it with the row editor? it tried:

//.....roweditor ....columns:.....
{
            header: 'WochenTage',
            dataIndex: 'WOCHE',
            width: 100,
            sortable: true,
            editor:
                new Ext.form.TriggerField({items:
                new Ext.menu.Menu({
                allowBlank: true,
                items:[{xtype:"label",text:"1"},{xtype:"label",text:"2"}]
            })})
        }
/....

but it's not working ...

Answer 3

Problem sovled with:

{
  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?');
    }
  })
}