I have datecolumn in a grid.
I am getting value from backend in following format: Y-m-d H:i:s. I have to display it as d.m.Y. And While sending back I have to again send it as Y-m-d H:i:s.
My code is as following:
Model
{
name: 'REA_LIT_URSPR',
type: 'date',
dateFormat:'Y-m-d H:i:s.0'
}
View
{
xtype: 'datecolumn',
format:'d.m.Y',
text: 'Ursp. LT',
align: 'center',
flex:1,
dataIndex: 'REA_LIT_URSPR',
editor: {
xtype: 'datefield',
format:'d.m.Y',
editable: false
}
}
Now issue is that if I get this value 2016-04-05 23:15:03.0, it is displayed properly. But as soon as I click it to edit it(and cancel it without selecting new date), I lose the Time 23:15:03.0 and it is changed to 00:00:00.0.
I want to persist this time, in case when user click on cell to change date but change his mind and click somewhere else without changing date.
I am using Ext.grid.plugin.CellEditing for making grid editable.
Can someone tell me what I am doing wrong or how can I achieve my goal?
ExtJS CellEditing plugin does not support "canceling" an edit by the user - whenever you click into the field and then leave, the field is validated, and if that does not fail, it is "edited". This is different in RowEditing, where a cancel button is shown that would cancel the edit and fire the canceledit event without validating the input.
So you would have to use the beforeedit and validateedit events on the CellEditing plugin. How to use them is described very well in the ExtJS docs, which documents how to access the date field, the record and the store all at the same time. Example code:
beforeedit:function( editor, context, eOpts ) {
editor.oldTime = context.record.data.REA_LIT_URSPR;// Save old value.
},
validateedit:function ( editor, context, eOpts ) {
if(editor.context.value == editor.oldTime) // Compare Values and decide
context.cancel = true; // whether to save it or not
}
{
xtype: 'datecolumn',
format:'Y-m-d g:i:s A',
text: 'Ursp. LT',
align: 'center',
flex:1,
dataIndex: 'REA_LIT_URSPR',
editor: {
xtype: 'datefield',
format:'Y-m-d g:i:s A',
editable: false
}
}
Ok so the problem is on column date format, maybe you lose a part of date because g:i:s aren't saved from the datecolumn.
I haven't tryed the code, but if it doesn't work try to create a new date format using these docs http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Date-method-parse (same on extjs 4)
sorry for first answer, just not clear question
Related
I am wondering if there is any way one could place a date input control in a toolbar similar to the one used for date input on a form?
Yes, it's possible, but it's quirky.
You will have to define the input field as a toolbar button:
{ type: 'html', id: 'roles', html: '<input id="id_role">' },
and in the toolbar's onRefresh() event you will have to cast the input to the desired w2filed:
onRefresh: function(event) {
if(event.target == 'roles'){
// w2field in toolbar must be initialized during refresh
// see: https://github.com/vitmalina/w2ui/issues/886
event.onComplete = function(ev){
$("#id_role").w2field('list', { items: roles });
};
}
},
In my example I'm inserting a drop down list, but you can adjust it to your needs.
Please see https://github.com/vitmalina/w2ui/issues/886 for an "official" reply.
I am trying to filter date, before & after work proper but ON not work.
Please check screenshot.
Code :
{
text: "Updated Date", dataIndex: 'CreatedDate', groupable: false,xtype: 'datecolumn', filter: { type: 'date', active: true, dateFormat: 'm/d/Y', active: true }
}
I would write log messages by console.log("filter :" + this.filter) within the object and also within all interesting points to figure out the sequence of updating.
Maybe a layout update by Objektname.doLayout() is the solution (just an idea)?
"on" appears to be based on a perfect match (==)
If I removed hour, minute, second from time object, "on" than worked
Have you tried ticking the 'On' check box?
I have found that if you picked a date it doesn't automatically tick the check box.
Try this code
{ text: "Updated Date", dataIndex: 'CreatedDate', groupable: false,filter: true, renderer: Ext.util.Format.dateRenderer('m/d/Y')}
And pass these property in your CreatedDate field in Model
dateFormat: 'm/d/Y' , type: date
I have a grid with two checkcolumns and a text field
{
xtype: 'checkcolumn',
id: 'apprId',
text: '<b>Approve</b>',
width: 100,
dataIndex: 'aprvInd'
},
{
xtype: 'checkcolumn',
id: 'declId',
text: '<b>Decline</b>',
width: 100,
dataIndex: 'declInd'
},
{
id: 'declResnId',
header: '<b>Decline Reasons</b>',
dataIndex: 'declineReason',
align: 'center',
width: 200,
editor: new Ext.form.TextField({
maxLength: 100000
}),
}
if my grid has three rows, first row 'approve' checkbox checked, second row 'decline' checkbox checked and third row nothing checked.
on click of save button, i am doing a rest call and i m passing the data to db, and on success call back , i m reloading grid.
After reloading, the rows which have approve/decline checked should be disabled along with the 'declineReasons' text field.
How can i do this?
If you want to grey out the row I would look at the metaData parameter of the renderer config. Probably the trCls is referenced there.
To disable a checkbox I also would look at the renderer.
To disable the editor plugin look at the beforeedit event.
I got some problems loading data into a form which I pushed onSelect.
(loading details for a specific list item)
onProductSelect: function(_dataView, _record)
{
Ext.getCmp('products').push({
title: _record.data.name,
data: _record.data,
styleHtmlContent: true,
xtype: 'productDetails'
});
}
I am pushing another view (productDetails) onto my productView (which is a navigationView). The data (_record.data) is available in the new pushed view via
tpl: '{someField}'
Now I'd like to know how to get this data (the fields data) into a textfield or a button (or sth like this) of a form.
If someone has a better idea how to get the data into the view/form or how to change the views (from list to detail) please let me know :)
here are some suggestions to your code:
1.use of underbar ('_') inside Sencha Touch is meant for variables which have get/set/apply/update. Although you are using local variables, it is best practice.
2.the word '_record' hopefully is a record. If so then you should use:
name = _record.get('name');
data = _record.getData();
The best way to fill a form is to use a formpanel and add the values to the formpanel, while all fields have a popper name assigned:
If your data are:
data = {name: 'Kurt001', password: '12er51wfA!'}
You could use this:
Ext.define('App.view.ProductDetails', {
extend: 'Ext.form.Panel',
xtype: 'productdetails',
config: {
cls: 'product-details',
scrollable: null,
layout: 'vbox',
defaults: {
labelAlign: 'top',
clearIcon: false
},
items: [{
xtype: 'textfield',
name: 'name'
}, {
xtype: 'passwordfield',
name: 'password'
}, {
xtype: 'button',
itemId: 'btnLogin'
}]
}
});
And to add the data simply use:
Ext.Viewport.down('.productdetails').setValues(data);
Alternative:
var view = Ext.Viewport.down('.productdetails')
view.down('.textfield').setValue(data.name);
view.down('.passwordfield').setValue(data.password);
Alternative
view.down('.field[name=name]').setValue(data.name);
view.down('.field[name=password]').setValue(data.password);
To get the data from one view to the next you can follow different options:
1.Set the data to the current view and grab them from that view. It looks like you have a list. So you can apply the data to the list:
view.down('.list').myData = data;
Extended version would be to create a custom list with myData inside the config.
That way you could use:
view.down('.list').setMyData(data);
or in your case
_dataview.setMyData(data);
2.Use a store. As you are passing a record already you might want to add a selected field to your store model and simply set the flag.
I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
var form = this;
settings.onblur = function(e) {
t = setTimeout(function() {
original.reset.apply(form, [settings, self]);
}, 100);
};
$(this).find('input').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-y',
closeAtTop: true,
onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
});
},
submit : function(settings, original) { }
});
$(function() {
$('.edit_eta').editable('update_must_fix_eta.php', {
id: 'bugid',
name: 'eta',
type: 'datepicker',
event: 'click',
select : true,
width: '50px',
onblur:'cancel',
cssclass : 'editable',
indicator : 'Updating ETA, please wait.',
style : 'inherit',
submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1}
});
});
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.
Have you tried jeditable-datepicker plugin? It seems to do exactly what you need.
It enables jQuery UI Datepicker in Jeditable. Here's the demo.
Yes, I was using the same. I had to disable Prev and Next buttons which navigate to previous and next months respectively. I display 3 months calendar when the link is clicked and if the user wants to enter a date which does not fall in any of these 3 months I let him enter it manually by making the input text box editable. That solved my problem.