I have html span for datepicker like this
<span id="spanLimitFBClaim"></span>
then i call it's first.js
$("#spanLimitPaymentDate").datepicker("LimitPaymentDate")
datepicker comes form another global.js
$.fn.datepicker = function (id) {
var mydate = new Ext.form.DateField({
xtype: 'datepicker',
format: 'd-M-Y',
margin: '2 0 2 0',
renderTo: Ext.get($(this).attr("id")),
cls: 'sa-datepicker',
inputId: id,
value: new Date()
});
$("#" + id).attr("readonly", true);
}
it is works. the problem is. i want to get change event. i try to add in global.js the listener like this
$.fn.datepicker = function (id) {
var mydate = new Ext.form.DateField({
xtype: 'datepicker',
format: 'd-M-Y',
margin: '2 0 2 0',
renderTo: Ext.get($(this).attr("id")),
cls: 'sa-datepicker',
inputId: id,
value: new Date(),
listeners: {
select: function () {
console.log('Date selected: ', this.getValue());
}
}
});
$("#" + id).attr("readonly", true);
}
and it works. i see the value on global.js (console.log) the problem is how to add it in my span (from the first.js). because i do below code is not working
$("#spanLimitPaymentDate").datepicker("LimitPaymentDate", {
listeners: {
select: function () {
console.log('Date selected: ', this.getValue());
}
}
});
i'm very newbie in ext.js, seems i was typo in using it :(
Many thanks
In the first version, you set the listener in the config of the field you create in the function.
In the second version, you set the listener as the second argument to said function, but that function only takes one argument. So the config you set there is omitted.
It should work if you change your function like this:
$.fn.datepicker = function (id,config) {
var me=this;
var mydate = new Ext.form.DateField(
Ext.apply(config,{
xtype: 'datepicker',
format: 'd-M-Y',
margin: '2 0 2 0',
renderTo: Ext.get($(me).attr("id")),
cls: 'sa-datepicker',
inputId: id,
value: new Date()
});
);
$("#" + id).attr("readonly", true);
}
and then call
$("#spanLimitPaymentDate").datepicker("LimitPaymentDate", {
listeners: {
select: function (picker) {
console.log('Date selected: ', picker.getValue());
}
}
});
Related
I have value in minutes and i converted into hours and minutes (e.g like 615 minutes=10 hours and 15 minutes) and displayed in grid. by default ext js 5 is providing filter by string. But i want to filter by hours and minutes. Is it possible? if so, let me know.
You can easily extend Ext.grid.filters.filter.String filter to do that.
Example code which uses timefield:
Ext.define('Ext.ux.grid.filters.filter.Time', {
extend: 'Ext.grid.filters.filter.String',
alias: 'grid.filter.time',
type: 'time',
operator: 'eq',
// change item template to timefield
itemDefaults: {
xtype: 'timefield',
enableKeyEvents: true,
format: 'H:i',
hideEmptyLabel: false,
iconCls: Ext.baseCSSPrefix + 'grid-filters-find',
labelSeparator: '',
labelWidth: 29,
margin: 0,
selectOnFocus: true
},
createMenu: function () {
var me = this;
me.callParent();
// add handler to change event
me.inputItem.on({
scope: me,
change: {
fn: me.onChange,
buffer: 200
}
});
},
// handle change event
onChange: function(field) {
this.setValue(field.getValue());
},
// set value - value comes as date
setValue: function (value) {
var me = this;
if (me.inputItem) {
me.inputItem.setValue(value);
}
// convert date to number
me.filter.setValue(value.getHours() * 60 + value.getMinutes());
if (value && me.active) {
me.updateStoreFilter(me.filter);
} else {
me.setActive(!!value);
}
},
activateMenu: function () {
var value = this.filter.getValue();
// convert number back to date
this.inputItem.setValue(
new Date(2008, 0, 1, Math.floor(value / 60), (value % 60), 0)
);
}
});
Fiddle: http://jsfiddle.net/dw82uxkh/9/
When clicking on the dropdown to select individual months/years the dialog disappears like I am trying to click away.
fiddle: https://fiddle.sencha.com/#fiddle/9m6
Ext.onReady(function() {
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The fields
defaultType: 'textfield',
items: [{
xtype: 'datefield',
fieldLabel: 'Start Date',
id: 'startDate'
}],
renderTo: Ext.getBody()
});
});
This has been fixed in ExtJs 5.1.0.107
EXTJS-15968 Date Picker disappear after click on Month Picker.
http://docs.sencha.com/extjs/5.1/whats_new/release_notes.html
It turned out to be a bug indeed in Ext.Js v 5.0.1.
http://www.sencha.com/forum/showthread.php?289825
Solution with overriding Ext.picker.Date class worked for me:
Ext.define('EXTJS-14607.picker.Date', {
override: 'Ext.picker.Date',
runAnimation: function(isHide) {
var me = this,
picker = this.monthPicker,
options = {
duration: 200,
callback: function() {
picker.setVisible(!isHide);
// See showMonthPicker
picker.ownerCmp = isHide ? null : me;
}
};
if (isHide) {
picker.el.slideOut('t', options);
} else {
picker.el.slideIn('t', options);
}
},
hideMonthPicker: function(animate) {
var me = this,
picker = me.monthPicker;
if (picker && picker.isVisible()) {
if (me.shouldAnimate(animate)) {
me.runAnimation(true);
} else {
picker.hide();
// See showMonthPicker
picker.ownerCmp = null;
}
}
return me;
},
showMonthPicker: function(animate) {
var me = this,
el = me.el,
picker;
if (me.rendered && !me.disabled) {
picker = me.createMonthPicker();
if (!picker.isVisible()) {
picker.setValue(me.getActive());
picker.setSize(el.getSize());
picker.setPosition(-el.getBorderWidth('l'), -el.getBorderWidth('t'));
if (me.shouldAnimate(animate)) {
me.runAnimation(false);
} else {
picker.show();
// We need to set the ownerCmp so that owns() can correctly
// match up the component hierarchy, however when positioning the picker
// we don't want it to position like a normal floater because we render it to
// month picker element itself.
picker.ownerCmp = me;
}
}
}
return me;
}
});
{
xtype: 'htmleditor',
name: 'msg',
value : 'abcd',
id: 'myeditor',
listeners: {
afterrender: function(t2){
var but = Ext.create('Ext.Button', {
text: 'Click me',
handler: function() {
Ext.getCmp('myeditor').insertAtCursor('bbbb');
}
});
t2.getToolbar().add(but)
}
}
}
If cursers is not in the html editor I wont to insert 'bbbb' at the end of 'abcd' and if curser in any point in the editor wont to insert 'bbbb' at the curser point. Can you please help me to do this?
I've used this workaroud:
var before = Ext.getCmp('yourHtmlEditor').getValue();
Ext.getCmp('yourHtmlEditor').insertAtCursor('something');
var after = Ext.getCmp('noteEditor').getValue();
if (before==after) {
Ext.getCmp('yourHtmlEditor').setValue(before+'something');
}
I'm having real difficulty getting access to a variable that is an attribute of an extended FromPanel from within a button handler on the form. If anyone could offer assistance I'd greatly appreciate it.
Example form where I try to access myAttribute from within the handler of updateUnitsButton:
TrainOverviewPanel = Ext.extend(Ext.FormPanel, {
myAttribute: undefined
,initComponent:function() {
var unitIdField1 = new Ext.form.TextField({
itemId: 'unitIdField1',
flex: 1
});
var unitIdField2 = new Ext.form.TextField({
itemId: 'unitIdField2',
flex: 1
});
var unitIdField3 = new Ext.form.TextField({
itemId: 'unitIdField3',
flex: 1
});
var unitIdFields = new Ext.form.CompositeField({
itemId: 'unitIdFields',
items: [unitIdField1, unitIdField2, unitIdField3],
width: 200
});
var updateUnits = function() {
alert("How can I access attribute: " + this.myAttribute);
}
var updateUnitsButton = new Ext.Button({
tdoId: undefined,
text: 'Update',
handler: updateUnits,
width: 50
});
var updatableUnitIdFields = new Ext.form.CompositeField({
readOnly: false,
fieldLabel: 'Unit ID',
itemId: 'updatableUnitIdFields',
items: [unitIdFields, updateUnitsButton],
width: 300
});
Ext.apply(this, {
width: 450,
height: 130,
margins:'10 0 0 0',
items: [ updatableUnitIdFields ]
});
TrainOverviewPanel.superclass.initComponent.apply(this, arguments);
}
,onRender:function() {
TrainOverviewPanel.superclass.onRender.apply(this, arguments);
}
,refresh: function(data) {
this.myAttribute = data.myAttribute;
var unitIdFields = this.getComponent('updatableUnitIdFields').items.get(0);
unitIdFields.items.get(0).setValue(data.stockId1);
unitIdFields.items.get(1).setValue(data.stockId2);
unitIdFields.items.get(2).setValue(data.stockId3);
}
});
You can do it using two ways.
The first one
using closure:
// ...
var me = this;
var updateUnits = function() {
alert("How can I access attribute: " + me.myAttribute);
};
var updateUnitsButton = new Ext.Button({
tdoId: undefined,
text: 'Update',
handler: updateUnits,
width: 50
});
// ...
The second one
by sending scope variable to handler:
// ...
var updateUnits = function() {
alert("How can I access attribute: " + this.myAttribute);
};
var updateUnitsButton = new Ext.Button({
tdoId: undefined,
text: 'Update',
//handler: updateUnits,
width: 50
});
updateUnitsButton.on('click', updateUnits, this);
// ...
I am using this article of architecture http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/
in my code:
I have this Application.DashBoardForm.js in this i want to pass the value of the fromdate in the onclick event function , how can i pass the fromdate value ?
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Application.DashBoardForm= Ext.extend(Ext.FormPanel, {
border:false
,initComponent:function() {
var config = {
labelWidth: 125,
frame: true,
title: 'Date Range',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 175},
defaultType: 'datefield',
items: [{
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field
},{
fieldLabel: 'End Date',
name: 'todate',
id: 'todate',
vtype: 'daterange',
value : new Date(),
startDateField: 'fromdate' // id of the start date field
}]
,buttons: [{
text: 'Go',
onClick : function () {
// here i want to access the value of the form field
// how can i access the fromdate value so that i pass it to grid
console.log(this.getForm());
var win = new Ext.Window({
items:{xtype:'DashBoardGrid',fromdate:this}
});
win.show();
}
}]
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.DashBoardForm.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
// this.store.load();
Application.DashBoardForm.superclass.onRender.apply(this, arguments);
} // eo function onRender
});
Ext.reg('DashBoardForm', Application.DashBoardForm);
How can I pass the value of from date here in onclick function?
Being that you gave the field an ID of 'fromdate', you can reference it using Ext.getCmp() and from there call its getValue() method:
var field = Ext.getCmp('fromdate');
var win = new Ext.Window({
items: {
xtype: 'DashBoardGrid',
fromdate: field.getValue()
}
});
Set the scope of your button 'Go', so that you will have access to form within the handler method. By doing this, you will have access to the form from the handler method.
Now, to get access to the form element, you can use ref property or use find*() methods available in Ext.form.FormPanel to get the form element.
text: 'Go',
scope: this,
handler: function () {
fromdate = this.findById('fromdate');
// extract date value and use it...
value = fromdate.getValue();
}
When using ref property, set a ref for the formdata field:
ref: '../formdate'
fieldLabel: 'Start Date',
name: 'fromdate',
id: 'fromdate',
vtype: 'daterange',
value : new Date(),
endDateField: 'todate' // id of the end date field
And you should be able to access the form element through the form object in the handler.
this.formdate.getValue()