1. #21
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


    Hi Daniel_82,

    I'm not sure what are you trying to set. If you just need to move to today, you can set like:
    Code:
    homeCalendar.value = new Date();
    homeCalendar.update();

  2. #22
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    238
    Vote Rating
    0
    senacle is on a distinguished road

      0  

    Default The french version...

    The french version...


    In red/bold, the changes to have the french version.

    calendar.js


    Code:
    Ext.ux.Calendar = function(config) {
        Ext.ux.Calendar.superclass.constructor.call(this, config);
        this.addEvents({
            click: true,
            mouseover: true,
            mouseout: true
        });
    };
    
    Ext.ux.Calendar = Ext.extend(Ext.Panel, {
        onRender: function(container, position) {
            Ext.ux.Calendar.superclass.onRender.apply(this, arguments);
            this.createInitialLayout();
            this.update();
        },
        daysOfWeek: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
        value: new Date(),
        moveMonths: function(months) {
            this.value = this.value.add(Date.MONTH, months);
            this.update();
        },
        showPrevMonth: function() {
            this.moveMonths(-1);
        },
        showNextMonth: function() {
            this.moveMonths(1);
        },
        showNavigation: true,
    
        createInitialLayout: function() {
            var htmlData = [];
            htmlData.push("<table class=\"ux-cal\" width='100%' height='100%' cellspacing='0'>");
    
            htmlData.push("<thead>");
            htmlData.push("<tr class='ux-cal-header'>");
            htmlData.push("<th><div class='x-date-left'><a href='#'>&nbsp;</a></th>")
            htmlData.push("<th colspan='5' class='ux-cal-monthTitle'>&nbsp;</th>");
            htmlData.push("<th><div class='x-date-right' style='float:right'><a href='#'>&nbsp;</a></div></th>")
            htmlData.push('</th></tr>');
            htmlData.push('</thead>');
            htmlData.push('<tbody>');
    
            htmlData.push("<tr class='ux-cal-weekday'>");
            var daysOfWeek = this.daysOfWeek;
            for (var i = 0; i < 7; i++) {
                var width = i == 5 || i == 6 ? 15 : 14;
                htmlData.push('<td width="' + width + '%">' + daysOfWeek[i] + '</td>');
            }
            htmlData.push('</tr>');
    
            for (var i = 0; i < 42; i++) {
                if (i % 7 == 0) { // First day of week
                    htmlData.push("<tr class='ux-cal-row'>");
                }
                htmlData.push("<td>&nbsp;</td>");
                if (i % 7 == 6) { // Last day of week
                    htmlData.push("</tr>");
                }
            }
            htmlData.push('</tbody>');
            htmlData.push("</table>");
            this.body.update(htmlData.join(""));
    
            var leftNav = this.body.child("div.x-date-left a");
            var rightNav = this.body.child("div.x-date-right a");
            this.leftClickRpt = new Ext.util.ClickRepeater(leftNav, { handler: this.showPrevMonth, scope: this, preventDefault: true, stopDefault: true });
            this.rightClickRpt = new Ext.util.ClickRepeater(rightNav, { handler: this.showNextMonth, scope: this, preventDefault: true, stopDefault: true });
    
            var showNavigation = this.showNavigation;
            leftNav.setDisplayed(showNavigation);
            rightNav.setDisplayed(showNavigation);
            this.calendarHeaderEl = this.body.child('th.ux-cal-monthTitle');
    
            var table = this.body.select('table');
            table.on({
                mouseover: this.onMouseOver,
                mouseout: this.onMouseOut,
                click: this.onClick,
                scope: this
            });
    
            this.cells = this.body.select('tbody td');
        },
    
        beforeDestroy: function() {
            this.leftClickRpt.destroy();
            this.rightClickRpt.destroy();
            this.cells.destroy();
            Ext.ux.Calendar.superclass.beforeDestroy.apply(this, arguments);
        },
    
        onMouseOver: function(e) {
            this.processEvent('mouseover', e);
        },
    
        onMouseOut: function(e) {
            this.fireEvent('mouseout', e, this);
        },
    
        onClick: function(e) {
            this.processEvent('click', e);
        },
    
        processEvent: function(eventName, e) {
            var t = e.getTarget();
            var o = {};
            if (t.tagName == 'TD') {
                var cell = t;
                var row = t.parentNode;
                var rowIndex = row.rowIndex - 2; // Ignore header rows
                o = { cellIndex: cell.cellIndex, rowIndex: rowIndex, row: row, cell: cell };
                if (rowIndex >= 0) {
                    o.date = this.startOfCalendar.add(Date.DAY, ((o.rowIndex) * 7) + o.cellIndex);
                }
            }
            this.fireEvent(eventName, o, e);
        },
    
        update: function() {
            var value = this.value.clearTime();
            var startOfCalendar = value.getFirstDateOfMonth();
            var endOfCalendar = startOfCalendar.getLastDateOfMonth();
    
            var startWeekDay = Number(startOfCalendar.format("N"));
            if (startWeekDay > 0) {
                startOfCalendar = startOfCalendar.add(Date.DAY, 1-startWeekDay);
            }
    
            var endWeekDay = Number(endOfCalendar.format("N"));
            if (endWeekDay < 6) {
                endOfCalendar = endOfCalendar.add(Date.DAY, 6 - endWeekDay);
            }
    
            var duration = endOfCalendar - startOfCalendar;
            var oneDay = 1000 * 60 * 60 * 24;
            duration = duration / oneDay + 1;
    
            endOfCalendar = endOfCalendar.add(Date.DAY, 42 - duration);
    
            var htmlData = [];
    
            var calendarTitle = value.format("F Y");
            this.calendarHeaderEl.update(calendarTitle);
    
            var currentMonth = value.format("m");
            var o = { today: new Date().clearTime(), date: startOfCalendar };
            var cells = this.cells.elements;
            this.startOfCalendar = startOfCalendar;
            for (var i = 0; i < 42; i++) {
    
                o.css = o.date.format("m") == currentMonth ? "sameMonth" : "otherMonth";
                o.css += " x-unselectable";
                o.caption = o.date.format("d");
                o.cell = cells[i + 7];
    
                this.formatDay(o);
    
                o.cell.className = o.css;
                o.cell.innerHTML = o.caption;
                o.date = o.date.add(Date.DAY, 1);
            }
        },
        beforeDestroy: function() {
            if (this.rendered) {
                Ext.destroy(
                    this.leftClickRpt,
                    this.rightClickRpt
                );
            }
            Ext.ux.Calendar.superclass.beforeDestroy.apply(this, arguments);
        }
    });
    Ext.reg('ux-cal', Ext.ux.Calendar);

  3. #23
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    238
    Vote Rating
    0
    senacle is on a distinguished road

      0  

    Default


    Quote Originally Posted by durlabh View Post
    mankz, Tooltip is not part of the control itself. It is just to demonstrate the capabilities of the UX itself. So, you can customize whatever way you want.
    To change the tooltip and alert message to have your own date format, put in the html header part of this nice extension :

    Code:
    o.date.format("d/m/Y").toString()  //french date
    in place of :

    Code:
    o.date.toString()

  4. #24
    Ext JS Premium Member malstroem's Avatar
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    242
    Vote Rating
    0
    malstroem is on a distinguished road

      0  

    Default


    Hi There,

    I just try to use this extension with a dynamic date-store.
    That means that different dates for each month are loaded from the database into a JsonStore

    Any Ideas how to integrate that store with the "dates"-config of the extension?
    Cheers
    Thomas

  5. #25
    Ext JS Premium Member malstroem's Avatar
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    242
    Vote Rating
    0
    malstroem is on a distinguished road

      0  

    Default


    One more question - how can I add several events (dates) to one day???

  6. #26
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


    Here is a sample implementation we have with AJAX requests:

    Code:
    /*global Ext:false, MyApp: true */
    MyApp.AjaxCalendar = Ext.extend(Ext.ux.Calendar, {
    	storeDateField: 'LeaveDate',
    	cssConfig: {
    		busyDay: 'new-day-taken',
    		holiday: 'holiday'
    	},
    	initComponent: function() {
    		var storeOptions = Ext.apply({}, this.storeOptions, {
    			url: this.controller,
    			root: 'data',
    			baseParams: { action: 'list' },
    			fields: ['PtoId', 'EmployeeNumber', 'LeaveDate', 'Remarks', 'DayRemarks', 'FullName', { name: 'FromDate', type: 'date' }, { name: 'ToDate', type: 'date'}]
    		});
    
    		var store = new Ext.data.JsonStore(storeOptions);
    		this.store = store;
    		store.addListener({
    			load: this.onDataLoad,
    			scope: this
    		});
    
    		MyApp.AjaxCalendar.superclass.initComponent.apply(this, arguments);
    		this.addListener({
    			beforeUpdate: this.beforeUpdate,
    			render: this.createTooltip,
    			scope: this
    		});
    
    		this.on('mouseover', this.handleMouseOver, this);
    	},
    
    	createTooltip: function() {
    		this.tooltip = new Ext.ToolTip({
    			target: this.body,
    			showDelay: 20,
    			trackMouse: true,
    			disabled: true
    		});
    	},
    
    	getTooltipText: function(o) {
    		var store = this.store;
    		this.filterData(o);
    		if (store.getCount() > 0) {
    			var record = store.getAt(0);
    			return record.get('DayRemarks') || record.get('Remarks');
    		}
    	},
    
    	handleMouseOver: function(o) {
    		var tooltip = this.tooltip;
    		var text;
    		if (o.date) {
    			text = this.getTooltipText(o);
    		}
    		if (text) {
    			if (this.tooltip.rendered) {
    				this.tooltip.body.dom.innerHTML = text;
    			} else {
    				this.tooltip.html = text;
    			}
    			this.tooltip.show();
    		} else {
    			tooltip.hide();
    		}
    	},
    
    	refresh: function() {
    		delete this.loadedValue;
    		this.update();
    	},
    
    	beforeUpdate: function() {
    		if (this.value != this.loadedValue) {
    			var store = this.store;
    			store.baseParams.date = this.value.format('m/d/Y');
    			store.load();
    			return false;
    		}
    	},
    	onDataLoad: function(store) {
    		this.loadedValue = this.value;
    		this.update();
    	},
    
    	filterData: function(o) {
    		var toCompareTo = o.date.format("Ymd");
    		var storeDateField = this.storeDateField;
    		this.store.filterBy(function(record, id) {
    			if (Date.parseDate(record.get(storeDateField), 'X').format("Ymd") == toCompareTo) {
    				return true;
    			}
    			return false;
    		});
    	},
    
    	formatDay: function(o) {
    		var store = this.store;
    		this.filterData(o);
    
    		if (store.getCount() > 0) {
    			o.css += " " + this.cssConfig.busyDay;
    		}
    	}
    });

  7. #27
    Ext JS Premium Member malstroem's Avatar
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    242
    Vote Rating
    0
    malstroem is on a distinguished road

      0  

    Default


    Great - Thank You!!!
    I´ll adapt this to my needs in the next days...

  8. #28
    Ext User
    Join Date
    Mar 2008
    Posts
    1
    Vote Rating
    0
    tony_pe is on a distinguished road

      0  

    Default Move today

    Move today


    var da=new Date();
    dy = da.getFullYear();
    dm = da.getMonth() + 1;
    dd = da.getDate();
    if ( dy < 1970 ) dy = dy + 100;
    ys = new String(dy);
    ms = new String(dm);
    ds = new String(dd);
    if ( ms.length == 1 ) ms = "0" + ms;
    if ( ds.length == 1 ) ds = "0" + ds;
    ys = ys + ms + ds
    var s="homeCalendar.dates = {'"+ys+"':'Today'}";
    eval(s);

    homeCalendar.update();

    Know others format?

  9. #29
    Ext JS Premium Member malstroem's Avatar
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    242
    Vote Rating
    0
    malstroem is on a distinguished road

      0  

    Default


    Hi durlabh,

    one more question...
    I have some problems when using tooltips:

    When using this piece of code, I get the following error in Firebug:
    Code:
    "createTooltip": function() {
            this.tooltip = new Ext.ToolTip({
                target: this.body, 
                showDelay: 20,
                trackMouse: true
            });
        }
    Code:
    this.targetXY is undefined
                return [this.targetXY[0]+m...], this.targetXY[1]+mouseOffset[1]]; ext-all-debug.js (Zeile 28784)
    
    When using target: Ext.getBody() the tooltip is beeing dragged throughout the whole page...
    How can I assign a valid target?

    Thanks Thomas

  10. #30
    Ext User
    Join Date
    Oct 2009
    Posts
    14
    Vote Rating
    0
    ExtJSNewUser is on a distinguished road

      0  

    Default


    How do we get the Data from the database and show the dates highlighted on this control. like if you have a holiday table in database , we need to show those dates as highlighted on the control

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar