Results 1 to 6 of 6

Thread: Setting datepicker size to panel size.

  1. #1
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316

    Default Setting datepicker size to panel size.

    I have a date picker inside a panel. I want my datepicker to take the height of it parent panel.
    When I commented the width of th date picker. The date picker took the full available width. But it wont work if i comment the height section. So I tried setting the picker height like

    height: Ext.platform.isAndroidOS ? 320 : (!Ext.platform.isPhone ?datePanel.getHeight() : 203),

    Then it shows the error datePanel in not defined.

    I guess its because my datePanel Code is below the searchDatePicker code.

    I tried using the setHeight method in the searchDatePicker render event but it game me another error

    'Object dock has no method 'layout'

    Dont really know what the means.

    Here my code

    Code:
    searchDatePicker = new Ext.DatePicker({
    	//width: (!Ext.platform.isPhone ? 400 : 320),
    	height: Ext.platform.isAndroidOS ? 320 : (!Ext.platform.isPhone ?512 : 203),
    	useTitles: false,
    	value: {
    		day: 23,
    		month: 2,
    		year: 1984
    	},
    	dockedItems: [{
    		height:45,
    		xtype: 'toolbar',
    		dock: 'bottom',
    		// custom alignment of titlebar to left
    		titleCls: 'x-toolbar-title x-toolbar-left',
    		items: [{xtype: 'component', flex: 1},{
    			xtype: 'button',
    			ui: 'action',
    			text: 'Select Date',
    			handler: function() {
    				var v = searchDatePicker.getValue();
    				searchPanel.setCard(dummyList,'slide');
    			}
    		},{xtype: 'component', flex: 1}]
    	}],
    	listeners: {
    		"render" : function() {
    			searchDatePicker.setHeight(200);
    		}
    	}
    });
    
    datePanel = new Ext.Panel ({
    	scroll:'false',
    	items:searchDatePicker
    });
    Anyone know how to fix this. I dont want to write a static value as panel size will change with ipad and iphone.

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Use a fit layout.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316

    Default

    in the docs, datepicker does not have a layout config option.

    I tried it any way and my date picker takes the full width and height.
    But there are mainly 2 issues
    1. The selection blue bar doesn't display. I tried looking through the CSS but couldnt find the problem.
    2. When the picker displays no list is shown. But if i srollup on any of the list the items are shown. Basically items are not shown in the beginning.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    From the docs:

    The sizing and positioning of child items is the responsibility of the Container's layout manager which creates and manages the type of layout you have in mind.
    You need the fit layout on the the panel.

    Though I don't see why you're wrapping it in a panel, seems like you're doing it for no reason.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316

    Default

    I have a panel with the datepicker as first item and a button as the second item. And this whole panel is a item in a nested list. That is why im using a panel. I did not want to use a dock in the bottom list the datepicker example.
    But this error seems odd to me.

    Here my final code
    Code:
    repeatDatePicker = new Ext.DatePicker({
    	//width: (!Ext.platform.isPhone ? 400 : 320),
    	style:'margin-bottom:10px;',
    	height: Ext.platform.isAndroidOS ? 320 : (!Ext.platform.isPhone ?320 : 140),
    	//layout:'fit',
    	useTitles: false,
    	value: {
    		day: 23,
    		month: 2,
    		year: 2000
    	}
    });
    
    var startDate =[
        repeatDatePicker,
        {
            xtype: 'button',
            cls:'searchButton',
            ui: 'action',
            width:100,
            text: 'Save',
            handler: function() {
                sDate = repeatDatePicker.getValue();
                sDate = sDate.format('d D, F');
                repeatNestedList.setCard(1)
                repeatNestedList.getActiveItem().items.itemAt(5).setText('StartDate<span class="soapAmount">'+sDate+'</span>');
            }
        }
    ];
    
    apptEditer = [
            {
                cls:'clientName soapMiddle',
                text: 'Start Date<span class="soapAmount">&nbsp;</span>',
                items:startDate
            }
    ];
    App editor is given as an item to the nested list. App editor has many more items but deleted them to reduced the code.

  6. #6
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316

    Default

    I guess its a problem with nested list. Im not really sure. The code I gave in the first block worked perfectly once I added layout fit to the panel. But that that panel was item to card layout panel.

Similar Threads

  1. panel size = window size?
    By TheMonolith in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 19 Feb 2010, 12:06 AM
  2. Setting the browser size?
    By KJD in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 13 Nov 2009, 12:54 PM
  3. Change Datepicker Size?
    By nromanel in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 11 Nov 2009, 5:24 PM
  4. report on panel size when viewport changes size
    By ext.Will in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 24 Aug 2009, 12:33 PM
  5. How to change size of DatePicker
    By aloysius in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 17 Jan 2009, 6:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •