PDA

View Full Version : onclick image display datepicker



javapurna
16 Apr 2013, 2:44 AM
hi every one,

how to display datepicker when i am click on image.

var down = new Ext.Img({
xtype : 'image',
src :app_context_path +'/resources/images/icons/bullet_arrow_down.png',
x : 200,
y : 300,
style: {
cursor: 'pointer',
},
draggable :false,
index : 0,
listeners: {
render: function(c){
c.getEl().on('click', function(){
alert(' down');
Ext.create('Ext.DatePicker',{
listeners: {
'select': function(date_picker, date){
alert(date_picker);

}
}
});
}, c);
}
},

});


how to show datepicker. please help me

slemmon
17 Apr 2013, 3:07 PM
On click you could do something like:

*as an aside, please wrap your code in [ ] code brackets for readability - you can use the # button above for convenience



Ext.widget({
xtype: 'datepicker',
minDate: new Date(),
handler: function(picker, date) {
// do something with the selected date
}
, floating: true
}).showAt(e.getXY());

javapurna
17 Apr 2013, 8:04 PM
thanks very much slemmon.

hi slemmon ,i can't understand what you say(please wrap your code in [ ] code brackets for readability - you can use the # button above for convenience) . how to post code or my coding standard is not correct ,please suggest me i will change.

javapurna
17 Apr 2013, 8:41 PM
hi ,

[var down = new Ext.Img({ xtype : 'image',
src :app_context_path +'/resources/images/icons/bullet_arrow_down.png',
x : 200,
y : 300,
style: {
cursor: 'pointer',
},
draggable :false,
index : 0,
listeners: {
render: function(c){
c.getEl().on('click', function(){
alert(' down');
Ext.widget({
xtype: 'datepicker',
minDate: new Date(),
handler: function(picker, date) {
// do something with the selected date
}
, floating: true
}).showAt(c.getXY());
}, c);
}
},

}); ]


i got error [Uncaught ReferenceError: e is not defined ] , yes e is no reference , but c is defined. i change e to c a get another error [Uncaught TypeError: Object [object Object] has no method 'getXY'] .getxy() not there . please help me

slemmon
18 Apr 2013, 1:58 PM
On this line: c.getEl().on('click', function(){
do: c.getEl().on('click', function(e){

The click handler will be passed the event object as a param. From that you can do the e.getXY() to get the position where the click happened.

* When you author a comment up at the top is a toolbar with three rows of formatting options. The right-most button group on the second row has "# <> php" as its three buttons. If you paste your code in the comment then select it and then press the # button it will wrap your code for better readability.

javapurna
18 Apr 2013, 8:51 PM
thanks very much slemmon