Develop Reference

Extjs Set value to end timefield with respect to input in start timefield

I have a question.
I have 2 timeFields in my form, startTime and endTime. On selection of time from startTime I need the endTime to be filled with a value which is 2 hrs greater than the selected value in startTime field.
Can anyone help me out.
I'm using ext 4.2 and sencha architect.
var win = this.getRfRWindow();
var form = win.down('form');
var startTime = win.down('form').down('timefield[name=sTime]');
var endTime = win.down('form').down('timefield[name=eTime]');
endTime.clearValue();
endTime.setMinValue(startTime.getValue());
And I know this is how to set minValue.

I am not 100% sure if this is what you are trying to do but this code snippet will use the value set in one, and set the value in the other to 2 hours later. It will also set the min value to the start time selected.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Time Card',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'timefield',
name: 'in',
fieldLabel: 'Time In',
increment: 30,
anchor: '100%',
listeners:{
select: function(tf, record, eOpts){
// when selected, we want to use the same functionality as blur or you can change it.
tf.fireEvent('blur',tf);
},
// this is fired when the value is changed in the start field.
blur:function(tf, e,eOpts){
// get the value in the field.
var value = tf.getValue();
// if the value isn't empty, and is valid time.
if (value != ''){
var fullValue = new Date(value),
hours = fullValue.getHours(), // get hours
minutes = fullValue.getMinutes(); // get minutes
//create a new datetime object using hours / minutes from selected value
var timeOut = new Date();
timeOut.setHours(hours+2);
timeOut.setMinutes(minutes);
// get the out and set the value.
var timeOutField = tf.up('panel').down('timefield[name=out]');
timeOutField.setValue(timeOut);
//set min value to what was in the start time.
timeOutField.setMinValue(tf.getValue());
}
}
}
},
{
xtype: 'timefield',
name: 'out',
fieldLabel: 'Time Out',
increment: 30,
anchor: '100%'
}
]
}).show();
}
});
See Fiddle Here:
https://fiddle.sencha.com/#fiddle/16up

Considering you have two time fields in a panel, you only need to listen to select event of the first time field and get the second time field using component query and set its value accordingly.
Here is a working code example:
items: [
{
xtype: 'timefield',
fieldLabel: 'Start Time',
name: 'sTime',
editable: false,
increment: 30,
anchor: '100%',
listeners:{
// This event is fired after user selects a value from drop down menu
select: function(combo, record, eOpts){
// Creating Date object according to new Start date
var dateForNewStartTime = new Date(combo.getValue());
//create a new datetime object using selected time
var dateForEndTime = new Date();
dateForEndTime.setHours(dateForNewStartTime.getHours()+2); // Adding 2 more hours
dateForEndTime.setMinutes(dateForNewStartTime.getMinutes());
// Getting and Setting value (you can change this component query according to your requirements)
var timeOutField = Ext.ComponentQuery.query('timefield[name=eTime]')[0];
timeOutField.setValue(dateForEndTime);
// Setting minimum slectable value for End Time field accordingly
timeOutField.setMinimumValue(combo.getValue());
}
}
},
{
xtype: 'timefield',
fieldLabel: 'End Time',
name: 'eTime',
increment: 30,
editable: false,
anchor: '100%'
}
]

You can use ViewModel + Formulas to achieve your requirement. ViewModels are fundamental blocks in ExtJs and help you do model, control binding. It supports two-way binding, meaning if one changes other follows the change.
In your case you can have a formula to derive EndTime based on StartDate and since these two are model binding, the controls will automatically follow the update in date values.
Look at this sample code I've created to demonstrate the ViewModel + Formula example usage
The same is reproduced here for quicker reference
Ext.define('MyApp.view.TimeViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.timeviewmodel',
data: {
startTime: new Date(),
endTime: new Date()
},
formulas: {
getEndDate: function(get){
console.log(Ext.Date.add(get('startTime'), Ext.Date.HOUR, 2));
return Ext.Date.add(get('startTime'), Ext.Date.HOUR, 2);
}
}
});
Ext.define('dualDatePanel', {
extend: 'Ext.container.Container',
viewModel: {
type: 'timeviewmodel'
},
items: [{
xtype: 'timefield',
bind: '{startTime}'
},
{
xtype: 'timefield',
bind: '{getEndDate}'
}]
});
Ext.create('dualDatePanel', {
renderTo: Ext.getBody(),
width: 100,
height: 32,
emptyText: 'Binding Failed'
});

Setting the minimum year AVAILABLE for an Ext.form.DateField

I have a basic Ext.form.DateField which needs to have a minimum date.
Easy enough - just set the minValue field to whatever you want the minimum date to be. For example, to set the minimum allowable date to be the current month and year:
var myDateField = new Ext.form.DateField({
fieldLabel: 'Date',
value: new Date(),
columnWidth: 0.15,
padding: 5,
format: 'n/Y',
plugins: 'monthPickerPlugin',
hidden: false,
minValue: new Date()
});
If the user enters a date from the past, the form displays an error message that states 'The date in this field must be equal to or after ...' and the bound component.
However, what I really need is for the user to not even be able to SELECT an earlier year from the picker in the first place.
Basically, when the calendar comes up, I need for it to only display years 2015 and later - for the following, the years 2011, 2012, 2013, and 2014 should not even appear in the calendar.
Thanks in advance

Not sure that is doable.
You can disable dates using either the minValue or disabledDates configs, but they will still appear in the list.
However, once a user selects the month they are disabled, see below screenshot and sample:
disabled dates in calendar
ie.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
minValue:"01/01/2015",
disabledDatesText:"Date not available.",
maxValue: new Date() // limited to the current date or prior
}]
});
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
<script src="//cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

Show field label of a textfield?

I want to know the field label for a text field. Here's what i got so far:
var ok = Ext.ComponentQuery.query('textfield[itemId=fieldID]')[0];
//how to get the field label of that textfield????

You'll want to use the getFieldLabel() method as documented in sencha docs
Here is a fiddle demonstrating
Ext.ComponentQuery.query('#myField')[0].getFieldLabel()

{
xtype:'textfield',
fieldLabel: 'Locater',
width: 200,
id:'txtid',
labelWidth: 60,
padding: '0 0 0 5',
},
{
xtype: 'button',
handler: function () {
var f1 = Ext.getCmp('txtid').getFieldLabel();
alert(f1);
}
}

ExtJS form with labels and fields on the same line

I'm striving to create an ExtJS form with two labeled text fields.
I would like both the labels and the input fields to appear on the same line.
The code I've come up with breaks the text fields, showing the labels on the first line and the input fields on the next line.
What I have: http://jsfiddle.net/aw2Pr/
The fix would be probably extremely simple but I can't seem to figure out. This would be a piece of cake to do in HTML, I mean, like this:
<label>Amount: <input /></label>
<label>Currency: <input /></label>
http://jsfiddle.net/AyqYr/
How do I get a similar layout in ExtJS?
I've already tried changing the layout, changing the with of the textfields, assigning a width to the field labels, asking Google... no help so far.

To achieve fields with label on same line, remove style from default config by creating a container with horizontal layout.
See example code below:
Ext.onReady(function() {
var addUserForm = Ext.create(
'Ext.container.Container',
{
renderTo: Ext.getBody(),
layout: {
type: 'hbox'
},
anchor: '100%',
defaults: {
width: 200,
xtype: 'textfield'
},
items: [{
name: 'amount',
fieldLabel: 'Amount'
},{
name: 'currency',
fieldLabel: 'Currency'
}]
}
);
});

Extjs4 chart not plotting correct data

I created a simple line chart in Extjs4 for one of my projects, and the chart is not plotting the right data.
The chart uses the same store as the grid, but not showing the same data. Is there any way to trace the source of the problem, if not fixing it altogether?
The following is the code I use to generate the chart.
{
xtype: 'chart',
animate: true,
shadow: true,
store: 'Dataalls',
legend: {
position: 'top'
},
axes: [{
type: 'Numeric',
position: 'left',
title: 'Wind Speed',
fields: ['windspeed'],
grid: true
}, {
type: 'Category',
position: 'bottom',
title: 'Time',
fields: ['time']
}],
series: [{
type: 'line',
axis: 'left',
xField: ['time'],
yField: ['windspeed']
}]
}
(I tried using type: 'Time' for the x axis but gets the error "date.getFullYear is not a function" )

For the date.getFullYear() I suspect your date string is not parsable into a Date object. Could you post your other supporting code, ideally the full code of the Store and Grid? If you'd like to use the Time Axis you'll need to convert your date String into a date object via something along the lines of:
Ext.define('Your.Model', {
extend: 'Ext.data.Model',
fields: [
{name: 'dateString', type: 'string'},
{name: 'date',
convert: function(value, record) {
year = value.substring(0,4);
month = value.substring(5,7).replace(/^[0]+/g,"");
day = value.substring(8,10).replace(/^[0]+/g,"");
hour = value.substring(11,13).replace(/^[0]+/g,"");
// etc for min, sec, millis
return new Date(year, (month - 1), day, hour, 0, 0);
}
}
]
});
For debugging the chart not displaying correctly, I'd place assign your chart object to a var and in Firebug breakpoint after that variable assignment to be able to inspect your chart js object and look at the data inside.

I had a similar problem when using Time. Just fixed it by defining my model field types:
fields: [{name: 'date', type: 'Date'}, {name: 'close',type:'float'}]
As for why your chart is plotting like that, I got that before too, I realised that the json was passing it as a string, so I need to to be defined as a float too. I did a fix for that on the php end, by forcing it as a float first before I passed it over as json.