1. #11
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    how about a config option for animations.

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

      0  

    Default


    I've not played that much with transition but as far as I understand, we would need to replace the table element to actually use the transition. Right now, I just update the table cells when month changes. So, if somebody wants to go ahead and try that out, your are more than welcome! Source is all yours to modify.. and that's why I put it out in the community.

  3. #13
    Ext User
    Join Date
    Apr 2009
    Posts
    49
    Vote Rating
    0
    canakaltun is on a distinguished road

      0  

    Default


    i think that if you change html an js it will work
    html:
    create a div and import js
    in calander js
    also rendering should be done to created div
    ex: renderTo: 'panel'


    creating an onready function and setiing clander in it wiill solve that problem
    like
    Ext.onReady(function() {.........

    iam not experd but after this problem i searched and evertbody did like that... also in samples

    if you can do that it will be wonderfull

  4. #14
    Ext User
    Join Date
    Apr 2009
    Posts
    49
    Vote Rating
    0
    canakaltun is on a distinguished road

      0  

    Default


    also can you read data from json?

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

      0  

    Default


    Of course you can use JSON. There is a dates property in sample that can be overridden. If you click on the hyperlink in the example, it resets the JSON data changing the date being highlighted!

  6. #16
    Ext User
    Join Date
    Apr 2009
    Posts
    49
    Vote Rating
    0
    canakaltun is on a distinguished road

      0  

    Default


    will u do other things?

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

      0  

    Default


    I'm unsure what other things you are talking about. If you are talking about moving the code in html to onReady event, you can do it yourself. Also, if you want, you can create div and use renderTo config instead of calling render method at the end!

  8. #18
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    durlabh,

    Great calendar. It would be nice to add a month year picker like the one in the last post of this thread. Maybe a button for today somewhere as well.

    http://extjs.com/forum/showthread.ph...nthMenu&page=2

    Thanks, Marty

  9. #19
    Ext User
    Join Date
    Jun 2009
    Posts
    2
    Vote Rating
    0
    ctoestreich is on a distinguished road

      0  

    Default Problem in IE6

    Problem in IE6


    This works great in Mozilla, but fails to render in IE. I have dug deep into the ExtJS code and it might be something with the framework. Although when rendering the cal to an Ext.window it works, just not when you try and render it in an Ext.panel.

    Code:
    /* calendar */
    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: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        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 == 0 || 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, -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);
    Code:
     <span id="one">Hello World</span>
        <P/>
        <span id="calSpan"></span>
        <p/>
        <span id="three"><a href="javascript:emulateAJAX()">Ajax calendar data</a></span>
        
        <script type="text/javascript">
            Ext.onReady(function () {
    
                emulateAJAX = function() {
                    // Sample data that could have been from AJAX request
                    homeCalendar.approvedDates = {
                        '20100126': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.',
                        '20100127': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.',
                        '20100128': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.',
                        '20100129': 'Status: Approved<BR>Name: Christian<BR>Details: I like cheese.'
                    }
                    homeCalendar.declinedDates = {
                        '20100116': 'Status: Declined<BR>Name: Christian<BR>Details: I hate cheese.'
                    }
                    homeCalendar.pendedDates = {
                        '20100114': 'Status: Pended<BR>Name: Christian<BR>Details: I maybe cheese.'
                    }
                    if(homeCalendar.rendered) {
                        homeCalendar.update();
                    }
                };
    
                var homeCalendar = new Ext.ux.Calendar({
                    width: 250,
                    height: 250,
                    // Sample data
                    approvedDates: {
                    },
                    declinedDates: {
                    },
                    pendedDates: {
                    },
                    getData: function(o) {
                        var approved = this.getApprovedData(o);
                        var declined = this.getDeclinedData(o);
                        var pended = this.getPendedData(o);
                        if(approved) {
                            return this.approvedDates[o.date.format("Ymd")];
                        }
                        if(declined) {
                            return this.declinedDates[o.date.format("Ymd")];
                        }
                        if(pended) {
                            return this.pendedDates[o.date.format("Ymd")];
                        }
                    },
                    getApprovedData: function(o) {
                        return this.approvedDates[o.date.format("Ymd")];
                    },
                    getDeclinedData: function(o) {
                        return this.declinedDates[o.date.format("Ymd")];
                    },
                    getPendedData: function(o) {
                        return this.pendedDates[o.date.format("Ymd")];
                    },
                    // Custom formatting based on date
                    formatDay: function(o) {
                        var approved = this.getApprovedData(o);
                        var declined = this.getDeclinedData(o);
                        var pended = this.getPendedData(o);
                        if(approved) {
                            o.css += " ux-cal-highlight-approved";
                            //o.caption += "*";
                        }
                        if(declined) {
                            o.css += " ux-cal-highlight-declined";
                            //o.caption += "*";
                        }
                        if(pended) {
                            o.css += " ux-cal-highlight-pended";
                            //o.caption += "*";
                        }
                    },
                    listeners: {
                        // Sample for click handling
                        click: function(o) {
                            if(o.date) {
                                var approved = this.getApprovedData(o);
                                var declined = this.getDeclinedData(o);
                                var pended = this.getPendedData(o);
                                var data;
                                if(approved) data = approved;
                                if(declined) data = declined;
                                if(pended) data = pended;
                                if(data) {
                                    Ext.Msg.alert('Details', data);
                                    //                        } else {
                                    //                            Ext.Msg.alert('Details', 'No event scheduled on ' + o.date.toString());
                                }
                            }
                        },
    
                        // Sample for mouse over handling to show tool-tip
                        mouseover: function(o) {
                            if(!o.date) {
                                this.tooltip.hide();
                            } else {
                                var text = this.getData(o);
                                if(text) {
                                    if(this.tooltip.rendered) {
                                        this.tooltip.body.dom.innerHTML = text;
                                    } else {
                                        this.tooltip.html = text;
                                    }
                                    this.tooltip.show();
                                } else {
                                    this.tooltip.hide();
                                }
                            }
                        },
    
                        // Adding tool-tip to the calendar
                        render: function() {
                            this.tooltip = new Ext.ToolTip({
                                target: this.body,
                                showDelay: 20,
                                trackMouse: true
                            })
                        },
    
                        destroy: function() {
                            this.tooltip.destroy();
                        }
                    }
                });
    
                 panel = new Ext.Panel({
                    height: 300,
                    width: 300,
                    items: homeCalendar,
                    renderTo: "calSpan",
                    layout: 'fit'
                });
    
                Ext.QuickTips.init();
            });
                
            
        </script>
    IE seems to error on line 3138 in the ext-all-debug.js

    if(loadScripts !== true){
    this.dom.innerHTML = html;
    if(Ext.isFunction(callback)){
    callback();
    }
    return this;
    }

  10. #20
    Sencha User daniel_82's Avatar
    Join Date
    Feb 2009
    Posts
    31
    Vote Rating
    0
    daniel_82 is on a distinguished road

      0  

    Default set date be variable?

    set date be variable?


    Thanks for develop this simple calendar.

    I just wondering how to set date by variable?

    Code:
                    var x = new Date();
                    var y = x.getYear();
                    var m = x.getMonth() + 1; // added +1 because javascript counts month from 0
                    var d = x.getDate();
                    var today = y + '-' + m + '-' + d;
    
                    var fDate = (y * 100 + m) * 100 + d;
                    homeCalendar.dates = {
                        fDate: 'Today'
                    }
                    homeCalendar.value = fDate;
                    if (homeCalendar.rendered) {
                        homeCalendar.update();
                    }
    it is not working if set dates with variable unless I set dates = {'20100329':'Today'}.
    Anyone know how can i set date by default today's date?

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