[CLOSED] VTypes Question

**bruce** · Nov 12, 2008, 10:00 PM

Hello! Everyone!
This is extjs sample:

/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return;
        }
        if (field.startDateField &amp;&amp; (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        } 
        else if (field.endDateField &amp;&amp; (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    }
});

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();

        /*
         * ================  Date Range  =======================
         */
    
    var dr = new Ext.FormPanel({
      labelWidth: 125,
      frame: true,
      title: 'Date Range',
      bodyStyle:'padding:5px 5px 0',
      width: 350,
      defaults: {width: 175},
      defaultType: 'datefield',
      items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
      },{
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
      }]
    });

    dr.render('dr');
 ......

How can I use it in coolite ext? Because i don't know how to set endDateField & startDateField.

**geoffrey.mcgill** · Nov 13, 2008, 7:04 AM

Hi Bruce,

You can use the <CustomConfig> property to add the "endDateField" and "startDateField" properties.

Example

<ext:DateField ID="startdt" runat="server">
    <CustomConfig>
        <ext:ConfigItem Name="endDateField" Value="#{enddt}" Mode="Value" />
    </CustomConfig>
</ext:DateField>

<ext:DateField ID="enddt" runat="server">
    <CustomConfig>
        <ext:ConfigItem Name="startDateField" Value="#{startdt}" Mode="Value" />
    </CustomConfig>
</ext:DateField>

Hope this helps.

**geoffrey.mcgill** · Nov 13, 2008, 7:29 AM

Hi Bruce,

Here is a full Vtype="daterange" sample.

Example

<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!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 id="Head1" runat="server">
    <title>Coolite Toolkit Example - From/To Date functionality</title>
    <link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <h1>From/To Date functionality</h1>
        
        <ext:Window 
            ID="Panel1" 
            runat="server" 
            Width="400"
            AutoHeight="true"
            Title="DateField From/To Date"
            Icon="Date"
            BodyStyle="padding:6px;">
            <Body>
                <ext:FormLayout ID="FormLayout1" runat="server">
                    <ext:Anchor>
                        <ext:Label 
                            ID="Label1" 
                            runat="server"
                            StyleSpec="display:block;padding:0 0 12px 0;"
                            Html="If a value is specified / selected in the 'FromDate field', 
                            the 'ToDate field' doesn't allow any date prior to the 'FromDate' 
                            entry to be specified / selected and vice versa.">
                        </ext:Label>
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:DateField 
                            runat="server"
                            ID="FromDate" 
                            Vtype="daterange"
                            FieldLabel="To">
                            <Listeners>
                                <Render Handler="this.endDateField = '#{ToDate}'" />
                            </Listeners>                            
                        </ext:DateField>
                    </ext:Anchor>
                    <ext:Anchor>
                        <ext:DateField 
                            runat="server" 
                            ID="ToDate"
                            Vtype="daterange"
                            FieldLabel="From">
                            <Listeners>
                                <Render Handler="this.startDateField = '#{FromDate}'" />
                            </Listeners>                            
                        </ext:DateField>     
                    </ext:Anchor>
                </ext:FormLayout>
            </Body>            
        </ext:Window>                
   </form>
</body>
</html>

Hope this helps.

**bruce** · Nov 13, 2008, 10:00 PM

Thank you!But it's not OK~

Error in

 if(this.vtype){var C=Ext.form.VTypes;if(!C[this.vtype](A,this)){this.markInvalid(this.vtypeText||C[this.vtype+"Text"]);return false}}if(typeof this.validator=="function"){var B=this.validator(A);if(B!==true){this.markInvalid(B);return false}}

Error msg: Microsoft JScript runtime error: Out of stack space

in coolite.axd?917

I use coolite v0.6

**bruce** · Nov 15, 2008, 11:56 PM

Not solved~
help me please!

**geoffrey.mcgill** · Nov 16, 2008, 7:00 AM

oops... I forgot to mention... the full code sample I provided below might only work (as posted) with the v0.7 code base.*

Once v0.7 has been released, that code sample should start working. We also added to the Example Explorer. I will link to the example once live.*

**elbanna23** · Jan 21, 2009, 9:43 AM

okey
how about to change enddate and start date from CodeBehind.
please tell me how i can ,
for example if i need to make a birthday

But at least the difference between the date of birth and the moment 18-year .
please send me sample if you can.

thank you in advance

**Justin_Wignall** · Feb 18, 2009, 9:48 AM

This code still has a bug when trying to assign a SelectedDate in code behind.

To see the error use the sample in 0.7 example explorer and add e.g.

FromDate.SelectedDate = CDate("01/01/2008")
ToDate.SelectedDate = CDate("01/01/2009")

The problem I think lies in the fact the ToDate hasn't been rendered by the time it trys to assign the end date field.

 var ed = Ext.getCmp(field.endDateField);

Thread: [CLOSED] VTypes Question

Thread Tools

Search Thread

Display

[CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

Similar Threads

[CLOSED] Sorry~ one more question.

[CLOSED] vtypes dynamically add a mask

[CLOSED] Validation and VTypes - how does it all work?

[CLOSED] [1.0] Question on

[CLOSED] svn question

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] VTypes Question

[CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

RE: [CLOSED] VTypes Question

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us