Below is a bit of javascript code that was pulled from the example component making the Calendar Control work similar to the Calendar Component by loading in my own HTML for each calendar date. There is another bit of code javascript code that dictates how many items are listed for a single day (its set to 3 and anything over 3 gets built into a popup menu when you hover over the text showing on the date). Everything is working great but what I am wanting to do is style the "A5.Menu" to my liking rather than using the components default style. My main concern is occasionally this popup list has 50 some items in it so I would like to set a max height of the menu and make it scrollable rather then it just showing all the rows and having to scroll the entire page to see them all. I tried to look at the javascript code that exists within an edit combo control (A5.EditCombo see second bit of code) but it doesn't seem that the same properties exist in both control types (i.e. window.height and body.style.overflow properties don't work when added to the A5.Menu code). Has anyone else came across how to accomplish this? I also tried to switch A5.Menu with A5.EditCombo and only use the parts of the edit combo code that were applicable but then the popup menu wouldn't work.
Code:
function showEventList(objEle, dateStr) { var menuName = '_CalendarDetailsMenu'; var curObj = {dialog.object}.getControl('DT1'); if(typeof curObj[menuName] == 'undefined') { curObj[menuName] = new A5.Menu([],{ theme: '{dialog.style}', iconColumn: {show: false} }); } curObj[menuName].populate(curObj._menuItems[dateStr]); curObj[menuName].show('popup',objEle); }
Code:
new A5.EditCombo({dialog.editcombochoices.TEST},{ theme: '{dialog.style}', onBind: function() { } , window: { height: 'max: 3in' }, body: { style: 'overflow: auto;' }, onSelect: function() { { $e.execute(this,'change'); } }, listbox: { onItemDraw: function(ele,data,indx) {}, item: { columns: [ { name: 'user_id' } ], template: '{USER_ID} ', calculateValue: function(data) { return '' + data.USER_ID; } } }, selectionRequired: false, selectionRequiredFilterMode: 'default' });