PDA

View Full Version : Help Needed With rendering date Fields.



er.viveksharma
30 Jun 2011, 5:00 PM
Hi,
I have been stuck in this problem for a day now. I am rendering two date fields in a div. I have tried that using the renderTo , applyTo and through the formPanel to the DIV. the problem is that I need to have that in the dataView of a page and the date fields do shopw up but the date picker is in stone, doesnt work,

the code is something like this :


onLoad: function() {
var startdt = new Ext.form.DateField({
fieldLabel: 'Start Date',
width: 175,
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt' // id of the end date field
});
var enddt = new Ext.form.DateField({
fieldLabel: 'End Date',
width: 175,
name: 'enddt',
hideLabel: false,
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt' // id of the start date field
});
var dr = new Ext.Panel({
labelWidth: 125,
frame: false,
header: false,
border: false,
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
renderTo : 'dcDate',
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
}]

});







},



And the DIV is a simple html div



this.projectStateRedTpl = new Ext.XTemplate('<tpl for=".">',
'<div class="container" id="container_'+this.id+'"></div>',
'<div>{contact}</div>' + antoherHtml ,
'</tpl>');



the anotherHtml has the DIV I am trying to render the dates to :


antoherHtml = antoherHtml + "<div id='dcDate'><br></div><br>";




Please let me know what am I doing wrong here.

skirtle
5 Jul 2011, 9:35 AM
In the code you've posted you're creating each of the datefields twice, duplicating the ids. Having duplicate ids could cause all manner of problems.

er.viveksharma
5 Jul 2011, 9:58 AM
Actually its just the matter of the code pasted . The right version of the code is as follows : (Now I have created a FormPanel with a fieldSet and trying to render it to the div id : dcDate12345 as per the following ):

onLoad: function() {

var dr = new Ext.FormPanel({
frame: false,
header: false,
border: false,
bodyStyle:'padding:5px 5px 0',
height: 300,
defaults: {width: 175},
renderTo : 'dcDate12345',
items: [
new Ext.form.FieldSet({
title: 'Contact Information',
autoHeight: true,
autoWidth:true,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
width:190
}, {
fieldLabel: 'Last Name',
name: 'last',
width:190
}, {
fieldLabel: 'Company',
name: 'company',
width:190
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:190
},

new Ext.form.DateField({
fieldLabel: 'FCS DATE',
name: 'dob',
width:190,
allowBlank:false
})
]
})
]

});



The tpl for the page :


this.projectStateRedTpl = new Ext.XTemplate('<tpl for=".">',
'<div class="container" id="container_'+this.id+'"></div>',
'<div>' + antoherHtml + '</div>' ,
'</tpl>');



where "another" html is :
var antoherHtml = "";
//after some checking
antoherHtml = antoherHtml + "<div id='dcDate12345'></div>";


Please help me . The field are displayed fine just that the date picker is not working .

skirtle
5 Jul 2011, 6:03 PM
I'm struggling to reproduce your problem. Which ExtJS version is this? Which browsers have you tried?

Could you give this code a try? You'll need to update the paths:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Date Picker</title>

<link rel="stylesheet" type="text/css" href="lib/resources/css/ext-all.css" />

<script type="text/javascript" src="lib/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'lib/resources/images/default/s.gif';

Ext.onReady(function() {
new Ext.form.DateField({
allowBlank: false,
fieldLabel: 'FCS DATE',
name: 'dob',
renderTo: Ext.getBody(),
width: 190
});
});
</script>
</head>
<body>
</body>
</html>

If that code works can you try gradually changing it to look more and more like your code until it stops working? Then you'll know where the problem is.

The one thing that worries me about your template is that you have a loop (indicated by <tpl for=".">) in which you create HTML with static element ids. If the loop actually loops more than once it will be creating duplicate ids. Could you try using Firebug or similar to inspect the HTML of your page to check what elements the template has actually created?