1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default Unanswered: Ext datefield setValue how??

    Unanswered: Ext datefield setValue how??


    i wonder how the setValue method of Ext.form.field.date work? A dummy example here:


    var item = {
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'From',
    id: 'from',
    name: 'from_date',
    maxValue: new Date() // limited to the current date or prior
    };
    item.setValue(new Date());


    the last line would give me an error, saying item.setValue is not a function. How can that be?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can use value: new Date() to set this initially. As for your call, based on code:

    var item = Ext.getCmp('from'); // id property; we also recommend not using id, but rather itemId
    item.setValue(new Date());

    Regards,
    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      -1  

    Default


    Thanks. Where should i place the getCmp call?

    In my little dummy case, it is defined as such:

    Code:
    Ext.define('Direct.Test.Dashboard', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.dashboard',
        title: 'Button',
        minHeight: 500,
        items: [],
    
        layout: {
            type: 'vbox',
            align: 'left'
        },
    
        initComponent: function () {
            var item = {
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'From',
                id: 'from',
                name: 'from_date',
                value: new Date(),
                maxValue: new Date()  // limited to the current date or prior
            };
            //        item.setValue(Ext.Date.add( new Date(), Ext.Date.Day, -7));
            this.items.push(item);
            this.callParent(arguments);
        },
    
        afterRender: function () {
            var item = Ext.getCmp('from');
            item.setValue(new Date());
        }
    });
    And i get error: container not defined.

    Also, can you elaborate on "we also recommend not using id, but rather itemId item.setValue(new Date());"

    I read getCmp is dangerous, but everyone is using it, even the samples provided by sencha

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this helps:

    Code:
    Ext.define('Direct.Test.Dashboard', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.dashboard',
        title: 'Button',
        height: 500,
        width: 500,
        minHeight: 500,
        items: [],
    
        layout: {
            type: 'form',
            align: 'left'
        },
    
        initComponent: function () {
            var item = {
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'From',
                id: 'from',
                name: 'from_date',
                //value: new Date(),
                maxValue: new Date()  // limited to the current date or prior
            };
            //        item.setValue(Ext.Date.add( new Date(), Ext.Date.Day, -7));
            this.items.push(item);
            this.callParent(arguments);
        },
    
    	listeners: {
    	    afterrender: function () {
    	        var df = Ext.getCmp('from');
    	        df.setValue(new Date());
    	    }
    	}
    
    
    });
    
    Ext.onReady(function(){
    
    	Ext.create('Direct.Test.Dashboard',{
    		renderTo: Ext.getBody()
    	});
     
    });
    Regards,
    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    Thanks. It works. But why? When do i need to add afterrender, onRender, etc into listeners? Most of my custom components have afterrender without being part of listeners. Why this one would need a listener to handle?

    Sorry, i just do not understand the difference of having vs. not having listeners for the render-related events.

    And how do I minimize the space between the field label and the actual datefield? I tried to use labelWidth, labelStyle, none works.

    thanks again

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    Wonder if i can get an answer to the above question?

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    96
    Vote Rating
    3
    stimpy has a little shameless behaviour in the past

      0  

    Default


    I set the label padding like this
    Code:
    labelPad:5
    for what its worth i set date in a load method like this
    Code:
    Ext.getCmp('myDate').setValue(new Date(action.result.data.myDate));

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    unfortunately, add labelPad does not automatically "shrink" the label, eventually i had to overwrite the following markup.

    <td id="enddt-labelCell" class="x-field-label-cell" width="155" valign="top" style="width:20" halign="left">

    But i do not think this should be so hard to simply change the label width.

    Yes, the setValue method would work. But what i really wanted to do is to extend the dateField component, and expose setValue and getValue method. But I did not anticipate this would be such a big problem. Why? Any other better ways?

  9. #9
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    I changed item creation from xType to Ext.Create, so the dateField will created as the component is created. Code snippet in the following ...

    Ext.apply(Ext.form.VTypes, {
    daterange: function (val, field) {
    var date = field.parseDate(val);


    if (!date) {
    return;
    }
    if (field.startDateField && (!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 && (!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.define(Components.MultiDateSelector', {
    extend: 'Ext.form.Panel',
    border: false,

    items: [],
    layout: {
    type: 'table',
    columns: 3
    },


    defaults: {
    // applied to each contained panel
    bodyStyle: 'padding:2px;',

    border: 0
    },
    initComponent: function () {




    this.fromDateField =Ext.create('Ext.form.field.Date', {
    id: 'startdt',
    width: this.dateFieldWidth,
    maxValue: this.maxDate,
    minValue: this.minDate,
    vtype: 'daterange',
    endDateField: 'enddt'
    });

    this.toDateField = Ext.create('Ext.form.field.Date',{
    id: 'enddt',
    width: this.dateFieldWidth,
    maxValue: this.maxDate,
    minValue: this.minDate,
    vtype: 'daterange',
    startDateField: 'startdt'
    });


    this.items.push(this.fromDateField);
    this.items.push({ html: 'to' });
    this.items.push(this.toDateField);


    this.callParent();


    },


    ....




    setFromDate: function (date) {
    this.fromDateField.setValue(date);
    },

  10. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    8
    Vote Rating
    -5
    andersoninfidelitysencha can only hope to improve

      0  

    Default


    How can I override Extjs TextField? make it works like Date component, display content use some other format, but pass original value.

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