1. #1
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default Ext.form.ux.touch.CalendarPicker

    Ext.form.ux.touch.CalendarPicker


    Simple calendar to use instead of the default date picker. This is my first shot at creating a custom control so I'm sure there will be better ways of doing things, any additions are welcome since it still needs a little bit of work, fixing up the style on the form field display. Anybody with more experience on styling let me know on how to fix the gray box and text alignment.

    Git - https://github.com/ecanas/Ext.form.u...CalendarPicker
    Demo - http://www.ordersinseconds.com/calendarpicker/


    Here are some pics of how it looks iphone:



    and ipad:

  2. #2
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    16
    tomalex0 will become famous soon enough

      0  

    Default


    Nice to see that you developed a calendar ,

    I have posted this as Feature Request some months ago and status is open. So we could expect some thing from Sencha Guys

    http://www.sencha.com/forum/showthre...-functionality

    Hope you could do more based on that .

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Vote Rating
    0
    eladgel is on a distinguished road

      0  

    Default hey!

    hey!


    Would you mind if I take your example and create a time picker?

  4. #4
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    Not at all you can reuse any of the code to fit your needs.

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    17
    Vote Rating
    0
    eladgel is on a distinguished road

      0  

    Default the Cherry on top

    the Cherry on top


    I think you should change the next flow:
    user searches for a date-> user touches the day -> date has been picked->date window is closed

    to

    user searches for a date-> user touches the day -> date has been picked-> user has a visual feedback that date was picked -> user clicks on a confirm button

    this is how it works in most calenders

    Cheers- you did a wonderful job

  6. #6
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    -1
    Riaz is an unknown quantity at this point

      0  

    Default


    Hi "cd.Canas":
    I am trying to implement your code. I have a issue on that. Could you check, and give me some ideas.

    I have two panels into the “Ext.extend(Ext.Panel, {...}”

    Sample code:
    Code:
    var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
        title: 'Timesheet',
        iconCls: 'time',
        fullscreen: true,
        items: [{
            xtype: "fieldset",
            title: "Weekly Timesheet",
            items: [{
                xtype: "calendarpickerfield",
                label: "Date",
                dateFormat: 'd-m-Y',
               Value: new Date(),
                
    
        }, [WeeklyTimesheet]
    
        ]
    });
    When value of “value” is changed, I want to refresh “WeeklyTimesheet” panel. How do I do that?

  7. #7
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    the calendar picker has an Event for when the value changes. So you need to add a listerner for "select" search for the following lines of code
    Code:
    initComponent: function() {
            this.addEvents('select');
    .....
    ....
    onPickerChange: function(picker, value) {
            this.setValue(value);
            this.fireEvent('select', this, this.getValue());
        },
    ...

  8. #8
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    -1
    Riaz is an unknown quantity at this point

      0  

    Default


    Thanks for your reply. Could you please give details, how to add a listeners for "select" search? It will be appreciated.

  9. #9
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    -1
    Riaz is an unknown quantity at this point

      0  

    Default


    I have a following code:

    Code:
    var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
        title: 'Timesheet',
        iconCls: 'time',
        fullscreen: true,
        items: [{
            xtype: "fieldset",
            title: "Weekly Timesheet",
            items: [{
                xtype: "calendarpickerfield",
                label: "Date",
                dateFormat: 'd-m-Y',
                value: new Date(),        // Here is the date value
                
                listeners: {
                    render: function () {
                       var ChangingDate = ???  // How do I get changing date?
                      alert(ChangingDate);
                 }
                }
                //~Riaz-23rd11
    
            }]
        }
    
    
        ]
    });
    
    
    
    Ext.reg("jsWeeklyTimeSheetList", WeeklyTimesheetFrame);
    How do I get value into the "ChangingDate" variable?

  10. #10
    Touch Premium Member
    Join Date
    Oct 2010
    Posts
    93
    Vote Rating
    1
    ed.canas is on a distinguished road

      0  

    Default


    If you are using my calendar picker code, then you need to listen for select see code below

    Code:
    var WeeklyTimesheetFrame = Ext.extend(Ext.Panel, {
        title: 'Timesheet',
        iconCls: 'time',
        fullscreen: true,
        items: [{
            xtype: "fieldset",
            title: "Weekly Timesheet",
            items: [{
                xtype: "calendarpickerfield",
                label: "Date",
                dateFormat: 'd-m-Y',
                value: new Date(),        // Here is the date value
                
                listeners: {
                    select: function (picker, value) {
                       var ChangingDate = value;  // How do I get changing date?
                      alert(ChangingDate);
                 }
                }
                //~Riaz-23rd11
    
            }]
        }
    
    
        ]
    });
    
    
    
    Ext.reg("jsWeeklyTimeSheetList", WeeklyTimesheetFrame);
    See the sample on the previous post where I call this.fireEvent('select', this, this.getValue());

Similar Threads

  1. XTemplate + Touch form controls
    By Bucs in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 14 Sep 2011, 9:55 AM
  2. Using standard form elements with Sencha Touch
    By zenmity in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 20 Jan 2011, 4:02 PM
  3. Form fields validation in Sencha Touch
    By Yazla in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 9 Dec 2010, 3:32 AM
  4. Submitting a form using Sencha Touch
    By Rakesh Pai in forum Sencha Touch 1.x: Discussion
    Replies: 10
    Last Post: 2 Dec 2010, 12:56 AM
  5. Submitting a Form in Sencha Touch
    By vaughanhale in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 27 Jul 2010, 11:20 PM

Thread Participants: 5

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