Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default Unanswered: Highlight Dates in Datepicker control

    Unanswered: Highlight Dates in Datepicker control


    I am looking for a way to apply a class to one or more dates in a datepicker on the screen. I have extended the Ext.picker.Date control into my own "myDatepicker" control, and have that appearing on the screen successfully, but from there I'm kind of at a loss. I want to be able to assign a custom parameter, like "myDates" and have those dates (assume all in the same month) get a class assigned to them.

    I looked through the source code for Ext.picker.Date and looked at the "setDisabledDates" function, and honestly it wasn't clear how to modify this (in my own component of course) to use a different class.

    If I add a function like "setMyDates" do I have to do something to get it to run when the "myDates" parameter is set at initiation? Like in "afterRender"?

    Also how would I find and add a class to a specific date in the picker?

    This is the main code that has the panel with the extended datepicker:

    Code:
    Ext.define('MyApp.view.ExtendTest', {
        extend: 'Ext.container.Container',
        requires: ['MyApp.view.myDatepicker'],
        items: [
            {
                xtype: 'panel',
                title: 'Extended Datepicker',
                items: [{
                    xtype: "mydatepicker",
                    value: new Date("10/1/2012"),
                    myDates:   ["10/12/2012"]
                }]
            }
        ]
    });
    And this is the code I'm using that is extending the datepicker:

    Code:
    Ext.define('MyApp.view.myDatepicker', {
        extend: 'Ext.picker.Date',
        alias: 'widget.mydatepicker',
    
        // defaults
        myDates    : [],
        highlightCls : "",
        
        // functions
        initComponent: function() {
            var me = this;
            me.callParent(arguments);
        },
    
        afterRender: function() {
            // this will get called automatically
            var me = this;
        },
    
        setMyDates: function() {
            // this will not get called when the object is newly created
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,798
    Answers
    3467
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So first thing you are asking is you want a custom disabled CSS class?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Answers
    1
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    Basically yes. I wanted to be able to highlight different sets of days by using css classes.

    I ended up stealing code from the selectedUpdate function, and I pass it the info during the afterComponentLayout function call.

    Code:
    highlightDates: function (highlightDates, highlightCls, highlightTooltip) {
    		for(var i = 0; i < highlightDates.length; i++) {
    			var t     = Ext.Date.parse(highlightDates[i], 'm/d/Y').getTime(),
    			cells     = this.cells,
    			cellItems = cells.elements,
    			c,
    			cLen      = cellItems.length,
    			cell;
    
    
    			for (c = 0; c < cLen; c++) {
    				cell = Ext.fly(cellItems[c]);
    				if (cell.dom.firstChild.dateValue == t) {
    					cell.addCls(highlightCls);
    					cell.dom.title = highlightTooltip + ": " + cell.dom.title;
    					break;
    				}
    			}
    		}
    	}

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi