PDA

View Full Version : Date dropdown calendar Icon



srajakaruna
13 Jul 2010, 3:14 AM
I have a following form in a card layout. but Calendar icon in is not displaying so its not functioning. Please help ...


new Ext.FormPanel({
height:95,
id:'cardForm1_Id',
labelAlign: 'top',
items:[{
layout :'column',
border :false,
defaults:{layout:'form', border:false, bodyStyle:'padding:10px;', width:180},
items:[{
//col1
defaults:{width:220},
width:240,
items:[{
xtype:'combo',
id:'filtProjId',
hiddenName:'filtProj',
fieldLabel:'Project Name',
displayField:'nm',
valueField:'id',
store: new Ext.data.SimpleStore({
fields: [{name: 'id'},{name: 'nm'}],
data: Ext.hR.allUserProjects,
autoLoad:true,
listeners:{
load: function(_st, _rcd, _opts){
Ext.hR._loadInit = (_st.getRange().length>0)? true:false;
Ext.hR._initPrId = (Ext.hR._loadInit)? _st.getRange()[0].get('id'):'';
}
}
}),
mode:'local',
emptyText:'Select a Project...',
editable:false,
triggerAction: 'all',
listeners:{
'select':{
fn: function (_combo,_rcd,_index){
var _ps = Ext.getCmp('filtPropId').store;
var _cs = Ext.getCmp('idfiltChan').store;
_ps.baseParams.prj = _rcd.get('id');
_cs.baseParams.prj = _rcd.get('id');
_cs.load();
_ps.load();
}
}
}
}]
},{
//col2
defaults:{width:220},
width:240,
items:[{
id:'filtPropId',
xtype:'combo',
hiddenName:'filtProp',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'get_store.php'
}),
reader: new Ext.data.JsonReader({
root: 'myDir'
},Ext.data.Record.create([
{name:'id'},
{name:'nm'}
])
),
baseParams:{scr: 'project_properties_cmb' , prj:Ext.hR._initPrId},
listeners:{
'load':{
fn: function(_st){
Ext.getCmp('filtPropId').enable();
}
},
'beforeload': {
fn: function(_st){
Ext.getCmp('filtPropId').disable();
}
}
},
autoLoad: Ext.hR._loadInit
}),
fieldLabel: 'Property Name',
displayField:'nm',
valueField:'id',
mode:'local',
emptyText:'Select a Property...',
editable:false,
triggerAction: 'all',
disabled:true,
listeners:{
'enable':{
fn: function (_cb){
if (_cb.store.getRange().length > 0){
_cb.setValue(_cb.store.getRange()[0].get('id'));
_propName = _cb.store.getRange()[0].get('nm');
}
}
},
'select':{
fn: function(_st,_rec, _idx){
_propName = _rec.get('nm');
}
}
}
}]
},{
//col3
defaults:{width:90},
width:110,
items:[{
xtype:'datefield',
fieldLabel: 'From',
name: 'date_from',
id: 'date_from_id',
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: Ext.hR._tmpDate
}]
},{
//col4
defaults:{width:90},
width:110,
items:[{
xtype:'datefield',
fieldLabel: 'To',
name: 'date_to',
id: 'date_to_id',
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: new Date()
}]
},{
//col5
width:80,
items:[{
xtype:'button',
text: 'Apply',
width:60,
style:'margin: 18px 0px 0px 0px',
handler: function(){
_getGraphs(true);
}
}]
},{
//col6
width:80,
items:[{
xtype:'button',
text: 'Clear',
width:60,
style:'margin: 18px 0px 0px 0px',
handler: function(){}
}]
}]
}]
});

Animal
13 Jul 2010, 3:20 AM
For a start, that's overnested.

Make the FormPanel layout: 'column', and put the columns as direct child items of that.

srajakaruna
13 Jul 2010, 4:07 AM
I changed code as shown below. But Still its the same.. Please help


Ext.hR._cardForm1 = new Ext.FormPanel({
height:95,
id:'cardForm1_Id',
labelAlign: 'top',
layout:'column',
defaults:{border:false, bodyStyle:'padding-top: 10px;'},
items:[{
width:200,
layout:'form',
items:[{
xtype:'combo',
id:'filtProjId',
hiddenName:'filtProj',
fieldLabel:'Project Name',
displayField:'nm',
valueField:'id',
store: new Ext.data.SimpleStore({
fields: [{name: 'id'},{name: 'nm'}],
data: Ext.hR.allUserProjects,
autoLoad:true,
listeners:{
load: function(_st, _rcd, _opts){
Ext.hR._loadInit = (_st.getRange().length>0)? true:false;
Ext.hR._initPrId = (Ext.hR._loadInit)? _st.getRange()[0].get('id'):'';
}
}
}),
mode:'local',
emptyText:'Select a Project...',
editable:false,
triggerAction: 'all',
listeners:{
'select':{
fn: function (_combo,_rcd,_index){
var _ps = Ext.getCmp('filtPropId').store;
var _cs = Ext.getCmp('idfiltChan').store;
_ps.baseParams.prj = _rcd.get('id');
_cs.baseParams.prj = _rcd.get('id');
_cs.load();
_ps.load();
}
}
}
}]
},{
width:200,
layout:'form',
items:[{
id:'filtPropId',
xtype:'combo',
hiddenName:'filtProp',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'get_store.php'
}),
reader: new Ext.data.JsonReader({
root: 'myDir'
},Ext.data.Record.create([
{name:'id'},
{name:'nm'}
])
),
baseParams:{scr: 'project_properties_cmb' , prj:Ext.hR._initPrId},
listeners:{
'load':{
fn: function(_st){
Ext.getCmp('filtPropId').enable();
}
},
'beforeload': {
fn: function(_st){
Ext.getCmp('filtPropId').disable();
}
}
},
autoLoad: Ext.hR._loadInit
}),
fieldLabel: 'Property Name',
displayField:'nm',
valueField:'id',
mode:'local',
emptyText:'Select a Property...',
editable:false,
triggerAction: 'all',
disabled:true,
listeners:{
'enable':{
fn: function (_cb){
if (_cb.store.getRange().length > 0){
_cb.setValue(_cb.store.getRange()[0].get('id'));
_propName = _cb.store.getRange()[0].get('nm');
}
}
},
'select':{
fn: function(_st,_rec, _idx){
_propName = _rec.get('nm');
}
}
}
}]
},{
width:100,
layout:'form',
items:[{
xtype:'datefield',
fieldLabel: 'From',
name: 'date_from',
id: 'date_from_id',
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: Ext.hR._tmpDate
}]
},{
width:100,
layout:'form',
items:[{
xtype:'datefield',
fieldLabel: 'To',
name: 'date_to',
id: 'date_to_id',
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: new Date()
}]
},{
width:70,
layout:'form',
items:[{
xtype:'button',
text: 'Apply',
width:60,
style:'margin: 18px 0px 0px 0px',
handler: function(){
_getGraphs(true);
}
}]
},{
width:70,
layout:'form',
items:[{
xtype:'button',
text: 'Clear',
width:60,
style:'margin: 18px 0px 0px 0px',
handler: function(){}
}]
}]
});

/////////////////////////////////////////////////////////////////// card layout

new Ext.Panel({
title:'View Report By',
id:'dashboard_searchforms_id',
iconCls:'ico_report',
collapsible:true,
layout:'card',
activeItem:0,
region:'north',
height:(Ext.isIE)? 140:95,
init:false,
defaults:{border:false, hideMode:'offsets'},
items:[Ext.hR._cardForm1,Ext.hR._cardForm2],
listeners:{
render:function(_p){
if (!_p.init){
var _this = Ext.getCmp('filtProjId');
if (_this.store.getRange().length==0){
Ext.Msg.show({
title :'Warning',
msg :'There are No Projects Assigned to ".$_SESSION["loggedUser"]."',
buttons :Ext.Msg.OK,
fn :function(btn){
},
animEl :'elId',
icon :Ext.MessageBox.WARNING
});
return;
}
_this.setValue(_this.store.getRange()[0].get('id'));
_this.fireEvent('select',_this,_this.store.getRange()[0]);
Ext.hR._started = true;
_p.init = false;
}
}
}
})

Animal
13 Jul 2010, 4:33 AM
try



Ext.hR._cardForm1 = new Ext.FormPanel({
hideMode: 'offsets',
id: 'cardForm1_Id',
labelAlign: 'top',
layout: 'column',
defaultType: 'container',
defaults: {
layout: 'form',
style: 'padding-top: 10px;'
},
items: [{
width: 200,
items: [{
xtype: 'combo',
id: 'filtProjId',
hiddenName: 'filtProj',
fieldLabel: 'Project Name',
displayField: 'nm',
valueField: 'id',
store: new Ext.data.SimpleStore({
fields: [{
name: 'id'
}, {
name: 'nm'
}],
data: Ext.hR.allUserProjects,
autoLoad: true,
listeners: {
load: function (_st, _rcd, _opts) {
Ext.hR._loadInit = (_st.getRange().length > 0) ? true : false;
Ext.hR._initPrId = (Ext.hR._loadInit) ? _st.getRange()[0].get('id') : '';
}
}
}),
mode: 'local',
emptyText: 'Select a Project...',
editable: false,
triggerAction: 'all',
listeners: {
'select': {
fn: function (_combo, _rcd, _index) {
var _ps = Ext.getCmp('filtPropId').store;
var _cs = Ext.getCmp('idfiltChan').store;
_ps.baseParams.prj = _rcd.get('id');
_cs.baseParams.prj = _rcd.get('id');
_cs.load();
_ps.load();
}
}
}
}]
}, {
width: 200,
items: [{
id: 'filtPropId',
xtype: 'combo',
hiddenName: 'filtProp',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'get_store.php'
}),
reader: new Ext.data.JsonReader({
root: 'myDir'
}, Ext.data.Record.create([{
name: 'id'
},
{
name: 'nm'
}])),
baseParams: {
scr: 'project_properties_cmb',
prj: Ext.hR._initPrId
},
listeners: {
'load': {
fn: function (_st) {
Ext.getCmp('filtPropId').enable();
}
},
'beforeload': {
fn: function (_st) {
Ext.getCmp('filtPropId').disable();
}
}
},
autoLoad: Ext.hR._loadInit
}),
fieldLabel: 'Property Name',
displayField: 'nm',
valueField: 'id',
mode: 'local',
emptyText: 'Select a Property...',
editable: false,
triggerAction: 'all',
disabled: true,
listeners: {
'enable': {
fn: function (_cb) {
if (_cb.store.getRange().length > 0) {
_cb.setValue(_cb.store.getRange()[0].get('id'));
_propName = _cb.store.getRange()[0].get('nm');
}
}
},
'select': {
fn: function (_st, _rec, _idx) {
_propName = _rec.get('nm');
}
}
}
}]
}, {
width: 100,
items: [{
xtype: 'datefield',
fieldLabel: 'From',
name: 'date_from',
id: 'date_from_id',
readOnly: true,
allowBlank: false,
format: 'd/m/Y',
value: Ext.hR._tmpDate
}]
}, {
width: 100,
items: [{
xtype: 'datefield',
fieldLabel: 'To',
name: 'date_to',
id: 'date_to_id',
readOnly: true,
allowBlank: false,
format: 'd/m/Y',
value: new Date()
}]
}, {
width: 70,
items: [{
xtype: 'button',
text: 'Apply',
width: 60,
style: 'margin: 18px 0px 0px 0px',
handler: function () {
_getGraphs(true);
}
}]
}, {
width: 70,
items: [{
xtype: 'button',
text: 'Clear',
width: 60,
style: 'margin: 18px 0px 0px 0px',
handler: function () {}
}]
}]
});

/////////////////////////////////////////////////////////////////// card layout
new Ext.Panel({
title: 'View Report By',
id: 'dashboard_searchforms_id',
iconCls: 'ico_report',
collapsible: true,
layout: 'card',
activeItem: 0,
region: 'north',
height: (Ext.isIE) ? 140 : 95,
init: false,
/* defaults: { No effect
border: false,
hideMode: 'offsets'
}, */
items: [Ext.hR._cardForm1, Ext.hR._cardForm2],
listeners: {
render: function (_p) {
if (!_p.init) {
var _this = Ext.getCmp('filtProjId');
if (_this.store.getRange().length == 0) {
Ext.Msg.show({
title: 'Warning',
msg: 'There are No Projects Assigned to ".$_SESSION["loggedUser"]."',
buttons: Ext.Msg.OK,
fn: function (btn) {},
animEl: 'elId',
icon: Ext.MessageBox.WARNING
});
return;
}
_this.setValue(_this.store.getRange()[0].get('id'));
_this.fireEvent('select', _this, _this.store.getRange()[0]);
Ext.hR._started = true;
_p.init = false;
}
}
}
})


defaults won't override settings of already-instantiated Components. It provides defaults

srajakaruna
13 Jul 2010, 4:46 AM
I changed the code as below. Still no luck :( .. please help.

Do I have to check blank image URL ?





Ext.hR._cardForm1 = new Ext.FormPanel({
hideMode: 'offsets',
id: 'cardForm1_Id',
labelAlign: 'top',
layout: 'column',
defaultType: 'container',
defaults: {
layout: 'form',
style: 'padding-top: 10px;'
},
items: [{
width: 200,
items: [{
xtype: 'combo',
id: 'filtProjId',
hiddenName: 'filtProj',
fieldLabel: 'Project Name',
displayField: 'nm',
valueField: 'id',
store: new Ext.data.SimpleStore({
fields: [{
name: 'id'
}, {
name: 'nm'
}],
data: Ext.hR.allUserProjects,
autoLoad: true,
listeners: {
load: function (_st, _rcd, _opts) {
Ext.hR._loadInit = (_st.getRange().length > 0) ? true : false;
Ext.hR._initPrId = (Ext.hR._loadInit) ? _st.getRange()[0].get('id') : '';
}
}
}),
mode: 'local',
emptyText: 'Select a Project...',
editable: false,
triggerAction: 'all',
listeners: {
'select': {
fn: function (_combo, _rcd, _index) {
var _ps = Ext.getCmp('filtPropId').store;
var _cs = Ext.getCmp('idfiltChan').store;
_ps.baseParams.prj = _rcd.get('id');
_cs.baseParams.prj = _rcd.get('id');
_cs.load();
_ps.load();
}
}
}
}]
}, {
width: 200,
items: [{
id: 'filtPropId',
xtype: 'combo',
hiddenName: 'filtProp',
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'get_store.php'
}),
reader: new Ext.data.JsonReader({
root: 'myDir'
}, Ext.data.Record.create([{
name: 'id'
},
{
name: 'nm'
}])),
baseParams: {
scr: 'project_properties_cmb',
prj: Ext.hR._initPrId
},
listeners: {
'load': {
fn: function (_st) {
Ext.getCmp('filtPropId').enable();
}
},
'beforeload': {
fn: function (_st) {
Ext.getCmp('filtPropId').disable();
}
}
},
autoLoad: Ext.hR._loadInit
}),
fieldLabel: 'Property Name',
displayField: 'nm',
valueField: 'id',
mode: 'local',
emptyText: 'Select a Property...',
editable: false,
triggerAction: 'all',
disabled: true,
listeners: {
'enable': {
fn: function (_cb) {
if (_cb.store.getRange().length > 0) {
_cb.setValue(_cb.store.getRange()[0].get('id'));
_propName = _cb.store.getRange()[0].get('nm');
}
}
},
'select': {
fn: function (_st, _rec, _idx) {
_propName = _rec.get('nm');
}
}
}
}]
}, {
width: 130,
items: [{
xtype: 'datefield',
fieldLabel: 'From',
name: 'date_from',
id: 'date_from_id',
readOnly: true,
allowBlank: false,
format: 'd/m/Y',
value: Ext.hR._tmpDate
}]
}, {
width: 130,
items: [{
xtype: 'datefield',
fieldLabel: 'To',
name: 'date_to',
id: 'date_to_id',
readOnly: true,
allowBlank: false,
format: 'd/m/Y',
value: new Date()
}]
}, {
width: 70,
items: [{
xtype: 'button',
text: 'Apply',
width: 60,
style: 'margin: 18px 0px 0px 0px',
handler: function () {
_getGraphs(true);
}
}]
}, {
width: 70,
items: [{
xtype: 'button',
text: 'Clear',
width: 60,
style: 'margin: 18px 0px 0px 0px',
handler: function () {}
}]
}]
});


///////// card layout

Ext.hR.dashBoard = new Ext.Panel({
title:'Dashboard',
iconCls:'ico_dashboard',
id :'my_pref',
layout:'border',
items:[new Ext.Panel({
title:'View Report By',
id:'dashboard_searchforms_id',
iconCls:'ico_report',
collapsible:true,
layout:'card',
activeItem:0,
region:'north',
height:(Ext.isIE)? 140:95,
init:false,
items:[Ext.hR._cardForm1,Ext.hR._cardForm2],
listeners:{
render:function(_p){
if (!_p.init){
var _this = Ext.getCmp('filtProjId');
if (_this.store.getRange().length==0){
Ext.Msg.show({
title :'Warning',
msg :'There are No Projects Assigned to ".$_SESSION["loggedUser"]."',
buttons :Ext.Msg.OK,
fn :function(btn){
},
animEl :'elId',
icon :Ext.MessageBox.WARNING
});
return;
}
_this.setValue(_this.store.getRange()[0].get('id'));
_this.fireEvent('select',_this,_this.store.getRange()[0]);
Ext.hR._started = true;
_p.init = false;
}
}
}
}),{
xtype :'tabpanel',
region :'center',
id :'my_pref_tp',
listeners:{
afterLayout: function(){
if (Ext.getCmp('filtProjId').store.getRange().length!=0){
_getGraphs(false);
}else{
_loadvp();
}
}
}
}]
});

Animal
13 Jul 2010, 4:52 AM
Poke the resulting DOM and see what's there, how it's styled and sized.

srajakaruna
13 Jul 2010, 6:44 AM
I added a datefield to one of examples in EXT lib, and created a new page with just a form. still it doesn't show the date calendar icon. is that something to do with my EXT library ? please help


Ext.onReady(function(){
var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}),{
xtype:'datefield',
fieldLabel: 'From',
name: 'date_from_ch',
id: 'date_from_ch_id',
readOnly: true,
allowBlank:false,
format:'d/m/Y',
value: new Date()
}
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

simple.render(document.body);
});

Animal
13 Jul 2010, 7:48 AM
See why. Poke the DOM. Only you can do this, we can't debug remotely for you.

moegal
13 Jul 2010, 8:46 AM
maybe readOnly? Just a guess.