1. #21
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
    sanjshah is on a distinguished road

      0  

    Default


    Hi,

    Here's the HTML code from my page that produces an error when the datefieldplus (holidaydatetest) is clicked.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>tyu</title>
    </
    head>
    <
    head>
    <
    link rel="stylesheet" type="text/css" href="exttools/ext-2.0/resources/css/ext-all.css"/>
    <
    link rel="stylesheet" type="text/css" href="exttools/ext-2.0/resources/css/xtheme-gray.css" />
    <
    script type="text/javascript" src="exttools/ext-2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="exttools/ext-2.0/ext-all.js"></script>
    <script type="text/javascript" src="exttools/ext-2.0/datepicker/ext.ux.datepickerplus-min.js"></script>
    <link rel="stylesheet" type="text/css" href="stie.css" />
    <link rel="stylesheet" type="text/css" href="exttools/ext-2.0/datepicker/datepickerplus.css" />
    <script type="text/javascript">
    Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = 'exttools/ext-2.0/resources/images/default/s.gif';

        Ext.namespace('Ext.exampledata');

        taginfotext = '<p>Blah Blah Blah<br>Blah Blah Blah</p>';

        Ext.exampledata.equipment = [
                ['Equip1'],
                ['Equip2'],
                ['Equip3']
        ];
            
        Ext.exampledata.names = [
                ['Name1'],
                ['Name2'],
                ['Name3']
        ];
        
        Ext.exampledata.shopstores = [
                ['Shop1'],
                ['Shop2'],
                ['Shop3']
        ];

        Ext.exampledata.tagstore = [
                ['AAA:','Tage for A'],
                ['BBB:','Tage for B'],
                ['CCC:','Tage for C']
        ];
        
        var store = new Ext.data.SimpleStore({
            fields: ['type'],
            data : Ext.exampledata.equipment
        });
        
        var userstore = new Ext.data.SimpleStore({
            fields: ['username'],
            data : Ext.exampledata.names
        });
        
        var shopstore = new Ext.data.SimpleStore({
            fields: ['storename'],
            data : Ext.exampledata.shopstores
        });

        var tagstore = new Ext.data.SimpleStore({
            fields: ['tagprefix','itemdescription'],
            data : Ext.exampledata.tagstore
        });

        Ext.QuickTips.init();

        Ext.form.Field.prototype.msgTarget = 'side';

        // Asset Type
        var purchasedate = new Ext.form.DateField({
            width: 230,
            fieldLabel: 'Date Of Purchase',
            readOnly: true,
            format : 'd/m/Y',
            applyTo: 'purchaseddate'
        });
        
        var createdby = new Ext.form.TextField({
            width: 230,
            readOnly: true,
            applyTo: 'createdby'
        });
        
        var invoiceno = new Ext.form.TextField({
            width: 230,
            applyTo: 'invoiceno'
        });
        
        var cost = new Ext.form.NumberField({
            width: 230,
            applyTo: 'cost',
            emptyText : '0.00'
        });
        
        var assettype = new Ext.form.ComboBox({
            width: 230,
            store: store,
            displayField:'type',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'Select Equipment Type...',
            applyTo: 'assettype'
        });
        
        var shopstores = new Ext.form.ComboBox({
            width: 230,
            store: shopstore,
            displayField:'storename',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'Select store',
            applyTo: 'purchasedfrom'
        });
        
        
        //Asset Location
        var comboWithTooltip = new Ext.form.ComboBox({
            width: 230,
            store: userstore,
            displayField:'username',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'Select a User...',
            selectOnFocus:true,
            applyTo: 'allocation'
        });
        
        var dateissued = new Ext.form.DateField({
            width: 230,
            fieldLabel: 'Date Of Purchase',
            readOnly: true,
            format : 'd/m/Y',
            applyTo: 'dateissued'
        });


        //Comments
        var comments = new Ext.form.HtmlEditor({
            width: 600,
            applyTo: 'comments'
        });

         var holidaydatetest =  new Ext.ux.form.DateFieldPlus({
            usePickerPlus: true, //this will fire the use of datepickerplus instead of datepicker
            noOfMonth: 1,
            multiSelection: false,
            markNationalHolidays: true,
            useQuickTips:true,
            format : 'd/m/Y',
            tooltip:'do something',
              disabledDays: [0, 6], //0 = Sundays 6 = Saturdays
              disabledDaysText: 'Deliveries are not available on the weekends',
            disabledDates:['10/04/2008', '11/04/2008'],
            disabledDatesText :'this is not valid date',
            applyTo: 'holidaydatetest',
            listeners:{'onSelect':function(){var mydate = this.value; Ext.MessageBox.alert(mydate); }}        
        });

        //Tag Info Area
        var tagfield = new Ext.form.ComboBox({
            tpl: '<tpl for="."><div ext:qtip="{tagprefix}. {itemdescription}" class="x-combo-list-item">{tagprefix}</div></tpl>',
            width: 230,
            fieldLabel: 'Create Tag for Asset',
            store: tagstore,
            displayField:'tagprefix',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'Select Tag...',
            selectOnFocus:true,
            applyTo: 'itemtag'
        });

        var p = new Ext.Panel({
            title: 'Tag Details',
            hideCollapseTool: true,
            titleCollapse: true,
            collapsible: true,
            renderTo: 'taginfo',
            width:600,
            html: taginfotext
        });

    });
    </script>
    </head>
    <body>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><form action="" method="post" name="form1" id="form1">
      <fieldset class="x-fieldset">
      <legend>Asset Type</legend>
      <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="300" height="25" class="x-btn">Created By:</td>
          <td class="x-btn">Date of Purchase:</td>
        </tr>
        <tr>
          <td height="25"><input name="createdby" type="text" id="createdby" value="" /></td>
          <td><input type="text" name="purchaseddate" id="purchaseddate" /></td>
        </tr>
        <tr>
          <td height="25" class="x-btn">Invoice No:</td>
          <td class="x-btn">Purchased From:</td>
        </tr>
        <tr>
          <td height="25"><input type="text" name="invoiceno" id="invoiceno" /></td>
          <td><input type="text" name="purchasedfrom" id="purchasedfrom" /></td>
        </tr>
        <tr>
          <td height="25" class="x-btn">Asset Type:</td>
          <td class="x-btn">Cost:</td>
        </tr>
        <tr>
          <td height="25"><input type="text" name="assettype" id="assettype" /></td>
          <td><input type="text" name="cost" id="cost" /></td>
        </tr>
      </table>
      <p>&nbsp;</p>  </fieldset>
      <fieldset class="x-fieldset">
      <legend>Allocation Details</legend>
      <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="300" height="25" class="x-btn">Allocated Name:</td>
          <td class="x-btn">Date Issued:</td>
        </tr>
        <tr>
          <td height="25"><input type="text" name="allocation" id="allocation" /></td>
          <td><input type="text" name="dateissued" id="dateissued" /></td>
        </tr>
        <tr>
          <td height="25"><span class="x-btn">Condition:</span></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="25"><span class="x-btn"><input name="condition" type="radio" id="radio" value="New" checked="checked" />New
    <input type="radio" name="condition" id="radio2" value="Second Hand" />Second Hand
    <input type="radio" name="condition" id="radio3" value="N/A" />N/A</span></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="25"><span class="x-btn">Date Issued:</span></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="25"><input type="text" name="holidaydatetest" id="holidaydatetest" /></td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <p>&nbsp; </p>
      </fieldset>
      </p>
      <fieldset class="x-fieldset">
      <legend>Comments</legend>
      <textarea name="comments" id="comments" cols="45" rows="5"></textarea>
      </fieldset>
      <fieldset class="x-fieldset">
      <legend>Tags</legend>
      <div id="taginfo"></div>
      <br />
      <br />
      <input type="text" name="itemtag" id="itemtag" />
      </fieldset>
    </form>
    <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>

        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>

    <p>&nbsp;</p>
    </body>
    </html> 
    Any help is appreciated.

    Regards,

    Sanj

  2. #22
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by sanjshah View Post
    Hi,

    Here's the HTML code from my page that produces an error when the datefieldplus (holidaydatetest) is clicked.

    ...
    Any help is appreciated.
    MMh, i guess you still use Ext 2.0 ("exttools/ext-2.0/resources/" seems very suspicious, because the 2.0.2 release should look like "exttools/ext-2.0.2/resources/" by default)? I've tested your code with Ext 2.0.2 and i get no error. Everything works fine. Please upgrade to 2.0.2 and it should work.

    DatePickerPlus extends Datepicker, so there might be an old Bug in the original Code (that has been fixed in 2.0.2) that prevent it to be working with DatepickerPlus.

  3. #23
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
    sanjshah is on a distinguished road

      0  

    Default


    Thanks Marco,

    Updated to the latest Extjs and all working perfectly so thanks

    Also I like they way to hide 'Today' button much cleaner!

    Regards,

    Sanj

  4. #24
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    139
    Vote Rating
    1
    Spirit is on a distinguished road

      0  

    Default Bug report

    Bug report


    Looks real nice!

    I have tested your demo site and I found something which may not be workin as expected (IE & FF):

    If you select 7th April, hold down shift key and select a date in the next month, not all days between the two selected days will be selected! (always the last few are missing)

    Works well if selection is within one month.

    Greetz
    Spirit

  5. #25
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    This is an open question to all. All of these great calendar features are built on top of the same premise from the original DatePicker. A render method creates the framework html tables and an update function goes through each cell to update the class and date.

    I wonder if it was possible to improve this underlying logic. What if we were to render divs instead of tables and update them with pure css styling. You would need to have an image that contains the day numbers but that is not that much of a limitation. I imagine that if we could pull it off it most certainly would be quite a bit faster. --just an idea

    Best regards,
    Jerry Brown

  6. #26
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by Spirit View Post
    I have tested your demo site and I found something which may not be workin as expected (IE & FF):

    If you select 7th April, hold down shift key and select a date in the next month, not all days between the two selected days will be selected! (always the last few are missing)
    Works well if selection is within one month.
    Oups... Thanks for reporting. I fixed this and updated the demopage and first Post
    I also added a new Method "setDateLimit()" to be able to set minDate and maxDate at once

  7. #27
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by jerrybrown5 View Post
    This is an open question to all. All of these great calendar features are built on top of the same premise from the original DatePicker. A render method creates the framework html tables and an update function goes through each cell to update the class and date.

    I wonder if it was possible to improve this underlying logic. What if we were to render divs instead of tables and update them with pure css styling. You would need to have an image that contains the day numbers but that is not that much of a limitation. I imagine that if we could pull it off it most certainly would be quite a bit faster. --just an idea
    Yes, i thought about this myself and i think it should run faster. It's on my Roadmap for a 1.x Version (or Ext Dev Team comes up with this on the original Datepicker that i can extend)
    Building up each calendar as a div and floating them by CSS shoud only make it necessary to update one month instead of all of them by just repositioning the next month to be shown...
    Personally i needed the datepicker in function like i did with datepickerplus now asap, so building it up by tables was faster (codingwise). But i agree there should be more potential in gaining more performance

  8. #28
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    how can i use the 'afterdateclick' method?

    not so:

    PHP Code:
    listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} , 
    how then????

    thanks

  9. #29
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    889
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Quote Originally Posted by Richie1985 View Post
    how can i use the 'afterdateclick' method?

    not so:

    PHP Code:
    listeners:{'afterdateclick':function(){ Ext.MessageBox.alert('test'); }} , 
    how then????

    thanks
    "afterdateclick" works only if "multiSelection" is set to true. otherwise use the "select"-event (that was the only event from the original datepicker, so to be backward compatible the afterdateclick works only on multiSelection.

    i tested your code and it works as expected

  10. #30
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    mhh but the select event dosnt work

    PHP Code:
        var datum_supervisor =  new Ext.ux.form.DateFieldPlus({
            
    allowBlank:false,
            
    readOnly:true,
            
    showWeekNumbertrue,
            
    format'd.m.Y',
            
    valuedt.format('d.m.Y'),
            
    noOfMonth 1,
            
    noOfMonthPerRow 1,
            
    useQuickTips:false,
            
    listeners:{'select':function(){ Ext.MessageBox.alert('test'); }}
        }); 
    i had to call a function, when the user select a date in the datepicker.

Thread Participants: 111

  1. galdaka (1 Post)
  2. wehtam (5 Posts)
  3. nassaja-rus (1 Post)
  4. mystix (5 Posts)
  5. ludoo (1 Post)
  6. jsakalos (1 Post)
  7. laluigino (2 Posts)
  8. evant (1 Post)
  9. methodz (1 Post)
  10. stevebla (1 Post)
  11. netnoise (1 Post)
  12. KampfCaspar (1 Post)
  13. carstep (2 Posts)
  14. ZooKeeper (1 Post)
  15. nromanel (6 Posts)
  16. Spirit (1 Post)
  17. yuewah (4 Posts)
  18. chemist458 (3 Posts)
  19. jerrybrown5 (3 Posts)
  20. gtomalesky (5 Posts)
  21. jo2008 (1 Post)
  22. aacraig (7 Posts)
  23. stumpy_uk (2 Posts)
  24. hattia (3 Posts)
  25. lpfLoveExt (1 Post)
  26. thoreking (3 Posts)
  27. markusreimers (1 Post)
  28. sigaref (2 Posts)
  29. andreabat (1 Post)
  30. sanjshah (6 Posts)
  31. mask_hot (4 Posts)
  32. dorgan (1 Post)
  33. bornsilly (1 Post)
  34. Zord (3 Posts)
  35. aaronchiang (1 Post)
  36. skbach (5 Posts)
  37. joenilson (2 Posts)
  38. S1-Gezi (1 Post)
  39. pcsernyik (6 Posts)
  40. vizcano (1 Post)
  41. Richie1985 (2 Posts)
  42. radtad (6 Posts)
  43. tagsum (3 Posts)
  44. Nohcs777 (5 Posts)
  45. lavitsky (1 Post)
  46. Hunyi (1 Post)
  47. brenda (3 Posts)
  48. hp (2 Posts)
  49. Dave.Sanders (4 Posts)
  50. DVSDevise (3 Posts)
  51. moegal (3 Posts)
  52. EzBulka (1 Post)
  53. catapl3xis (2 Posts)
  54. rvrdesigns (2 Posts)
  55. rich02818 (5 Posts)
  56. armandoxxx (2 Posts)
  57. WhiteRussian (4 Posts)
  58. lacco (1 Post)
  59. Ronhead (3 Posts)
  60. Urkman (1 Post)
  61. descheret (3 Posts)
  62. dimitrij.zub (1 Post)
  63. hirenb (1 Post)
  64. sasho (7 Posts)
  65. CR_RedFox (1 Post)
  66. joshuabco (1 Post)
  67. apimio (4 Posts)
  68. sirtimbly (2 Posts)
  69. canxss (2 Posts)
  70. SimoAmi (2 Posts)
  71. wemerson.januario (1 Post)
  72. dubdub (3 Posts)
  73. Naokai (5 Posts)
  74. RuiDC (4 Posts)
  75. dkarlsso (1 Post)
  76. slisbin (1 Post)
  77. Chods (2 Posts)
  78. dkroells (3 Posts)
  79. alvaro1728 (1 Post)
  80. sneema (15 Posts)
  81. AdamLShepherd (2 Posts)
  82. bholyoak (2 Posts)
  83. dtex-lab (1 Post)
  84. EZboy (2 Posts)
  85. burbur (1 Post)
  86. strad84 (2 Posts)
  87. radubrehar (4 Posts)
  88. almotasim (2 Posts)
  89. itheart (1 Post)
  90. fmntf (4 Posts)
  91. Allbus (2 Posts)
  92. sprakash (2 Posts)
  93. sansie (3 Posts)
  94. siebe vos (6 Posts)
  95. gkarmadi (1 Post)
  96. fabads (16 Posts)
  97. kskrumpet (4 Posts)
  98. sivanesan (1 Post)
  99. marco81 (1 Post)
  100. Lobo (2 Posts)
  101. benoitrx (1 Post)
  102. JazzMan88 (3 Posts)
  103. Urzzza (1 Post)
  104. josefhaydn (2 Posts)
  105. eja40 (3 Posts)
  106. lukasw44 (1 Post)
  107. thchuong (1 Post)
  108. twhra (1 Post)
  109. ronei (1 Post)
  110. qdano (1 Post)
  111. quintenvk (1 Post)

Tags for this Thread