[OPEN-385] Scrollbar on EventList

Request new features or modifications for Extensible components

[OPEN-385] Scrollbar on EventList

Postby senacle » Mon Aug 05, 2013 5:12 am

Sometimes, i've a lot of events for some days.
When i click on the "+n more...", the panel with all the events appears, but with some height depending on the nulmbers of events, so all events aren't really visible, like in this screenshot :

eventlistautoheight.png
eventlistautoheight.png (21.15 KiB) Viewed 3745 times


I did some changes in the code.

New property in the Ext.ensible.cal.CalendarView

Code: Select all
boxMaxHeightDetailView: 200,


onDetailViewUpdated of Ext.ensible.cal.MonthView

Code: Select all
   onDetailViewUpdated : function(view, dt, numEvents){
      var p = this.detailPanel,
         frameH = p.getFrameHeight(),
            evtH = this.getEventHeight(),
==========> bodyH = frameH + (numEvents * evtH) + 3 < this.boxMaxHeightDetailView ? frameH + (numEvents * evtH) + 3 : this.boxMaxHeightDetailView, <==========
         // bodyH = frameH + (numEvents * evtH) + 3,
         dayEl = this.getDayEl(dt),
         box = dayEl.getBox();
      
      p.setHeight(bodyH);
      p.setWidth(Math.max(box.width, 220));
      p.show();
      p.getPositionEl().alignTo(dayEl, 't-t?');
   },


onMoreClick of Ext.ensible.cal.MonthView

Code: Select all
   onMoreClick : function(dt){
      if(!this.detailPanel){
           this.detailPanel = new Ext.Panel({
            id: this.id+'-details-panel',
            title: dt.format(this.detailsTitleDateFormat),
=============>   // layout: 'fit', <==========
            floating: true,
=============>   autoScroll: true, <==========
            renderTo: Ext.getBody(),
            tools: [{
               id: 'close',
               handler: function(e, t, p){
                  p.hide();
               }
            }],
            items: {
               xtype: 'extensible.monthdaydetailview',
               id: this.id+'-details-view',
               date: dt,
               view: this,
               store: this.store,
                    calendarStore: this.calendarStore,
               listeners: {
                  'eventsrendered': this.onDetailViewUpdated.createDelegate(this)
               }
            }
         });
           
            if(this.enableContextMenus && this.readOnly !== true){
                this.detailPanel.body.on('contextmenu', this.onContextMenu, this);
            }
      }
      else{
         this.detailPanel.setTitle(dt.format(this.detailsTitleDateFormat));
      }
      this.detailPanel.getComponent(this.id+'-details-view').update(dt);
   },



You can use it in the config views of your calendars :

Code: Select all
         multiWeekViewCfg: {
            boxMaxHeightDetailView: 300,
            .......
         },
         monthViewCfg: {
            boxMaxHeightDetailView: 400,
            .......
         },


Display as you can see below.

eventlistchooseheight.png
eventlistchooseheight.png (34.88 KiB) Viewed 3745 times
senacle
 
Posts: 22
Joined: Wed Dec 14, 2011 4:01 am

Re: Scrollbar on EventList

Postby brian.moeskau » Fri Aug 16, 2013 8:40 am

Thanks -- I did build in similar support in the 1.5.x branch a while back. When I get a chance I'll look at this and see if I can get it into the 1.0.x branch.
Personal Blog: Extraneous / Twitter: @bmoeskau / Meetup: Austin Bleeding Edge Web
User avatar
brian.moeskau
Site Admin
Site Admin
 
Posts: 1344
Joined: Sat Sep 18, 2010 5:00 pm
Location: Austin, Texas


Return to Feature Requests

Who is online

Users browsing this forum: No registered users and 1 guest

cron