PDA

View Full Version : Setting datepicker size to panel size.



blessan
4 Aug 2010, 10:21 PM
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



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.

evant
4 Aug 2010, 11:45 PM
Use a fit layout.

blessan
5 Aug 2010, 12:34 AM
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.

evant
5 Aug 2010, 12:39 AM
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.

blessan
5 Aug 2010, 12:48 AM
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


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.

blessan
5 Aug 2010, 1:23 AM
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.