View Full Version : [RESOLVED] DateField does not show the calendar button

21 Jul 2010, 5:29 AM
I use extJS and JQuery off the repositories as such:

<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-3.2/release/resources/css/ext-all.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2/release/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2/release/ext-all.js"></script>
I then have a datefield in a form which is defined as such:

var dtFromDate = new Ext.form.DateField({
fieldLabel: 'From Date',
width: 140,
id: 'FromDate',
name: 'FromDate',
format: 'd M Y',
allowBlank: true,
readOnly: true
However when I render the page I get the following:

As you can see the actualy calendar buttons are not displaying. I don't have this problem when I don't use the repositories. This is a bug in the repositories.
When I use firebug and analyse the element, this is what appears:

<div style="padding-left: 75px;" id="x-form-el-FromDate" class="x-form-element">
<div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen117" style="width: 140px;">
<input type="text" name="FromDate" id="FromDate" autocomplete="off" size="10" class=" x-form-text x-form-field x-trigger-noedit" style="width: 132px;" readonly="">
<img class="x-form-trigger x-form-date-trigger" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="ext-gen118" style="display: none;">

21 Jul 2010, 6:32 AM
Remove readOnly: true

21 Jul 2010, 6:32 AM
Use editable: false

21 Jul 2010, 5:36 PM
Thanks Animal,

That did the trick... strange how this had no effect with previous versions of extJS.

21 Jul 2010, 11:12 PM
It's because of what you tried to do, that the need for two configs arose.

You might want non-editability, but you still want the users to be able to change the field. readOnly means users can't change the field at all.

So readOnly wouldn't cover it.

You need the editable AND readOnly config options which do different things.