We Keep Coding

Ext JS datepicker, get a date range from two different calendars

Good day all, I'm entering in a big EXT JS project and unluckily I'm totally nood in Ext js, I'm trying to learn as much as possible from tuts and examples, but I'm struck on this basic problem.
I have two different datepickers defined as follow:
items: {
xtype: 'panel',
layout: 'hbox',
items: [{
title: 'FROM',
margin: '5',
items: {
xtype: 'datepicker',
start: true,
reference: 'startDate',
maxDate: new Date(),
maxText: 'Future dates are not available',
bind: {
value: '{startDate}'
},
showToday: false,
listeners: {
select: 'checkDateInterval'
}
}
}, {
title: 'TO',
margin: '5',
items: {
xtype: 'datepicker',
start: false,
reference: 'endDate',
bind: {
value: '{endDate}'
},
maxDate: new Date(),
showToday: false,
listeners: {
select: 'checkDateInterval'
}
}
}]
}
I've succefully defined the controller, where I have done a simple "console.log()" of everything the datepicker passed me:
Ext.define('xxx.xxx.xxx.xxxxxxxSetupController', {
extend: 'Ext.app.ViewController',
alias: 'controller.investmentsetupcontroller',
checkDateInterval: function (data){
console.log("data: ", data);
}
});
and that is working as expected.
The only issue is that I received a whole object full of data in the console.log, and I imagine that there should be a easier way to get the two selected dates. May I ask you some advice to handle this? my goal is to get those two dates, makes some calculations and call another function with the data.
thanks in advance.

To achieve this you need use data.value
your code will be like
checkDateInterval: function (data){
console.log("data: ", data.value);
}
Also check the fiddle here. Fiddle

Displayfield with template

I'm trying to implement a tpl within a displayfield to display a list of data sent to the server from a textarea.
The same data is displayed in a grid with rowexpander plugin (display values in XTemplate like textarea format)
Fiddle: https://fiddle.sencha.com/#fiddle/14sf
I tried something like this:
FIDDLE: https://fiddle.sencha.com/#fiddle/14t7
without sucess...
I tried every way I found to render a tpl unsuccessfully.
Display has a config tpl but it seems not work in my case...
I appreciate suggestions for resolving this issue

The displayfield also has renderer function. You can use it as in your grid:
//var is just for illustration of the issue
var vegetables_types = 'potatos\ncarrots\npumpkins';
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 450,
height: 200,
bodyPadding: 10,
title: 'Template',
items: [{
xtype: 'displayfield',
fieldLabel: 'TPL',
name: 'vegetables_types',
renderer: function(value, field) {
this.rndTpl = this.rndTpl || new Ext.XTemplate('<div><div>' + '<b>Vegetables: </b><ul><li>{[values.vegetables_types.replace(/\\n/g, "<li/>")]}</li><ul>' + '</div></div>');
return this.rndTpl.apply({
vegetables_types: value
});
},
listeners: {
render: function(field, eOpts) {
field.setValue('potatos\ncarrots\npumpkins')
}
}
}],
});
https://fiddle.sencha.com/#fiddle/14il

onUnselect event of jquery easyui datagrid

I am using JQuery EasyUI 1.3.4, I am having some trouble catching onUnselect event, following code illustrates my problem:
function NavigateProcess() {
$(function () {
var data = list;
$('#dg').datagrid({
view: detailview,
cache: true,
data: data,
loadMsg: 'Processing, please wait …',
singleSelect: true,
columns: [[
{
title: 'Name', field: 'Name', width: 180, editor: 'text'
//,formatter: formatProgress
},
{ field: 'ID', title: 'ID', width: 60, align: 'right', editor: 'text' },
{ field: 'RatePlan', title: 'RatePlan', width: 80, editor: 'text' },
{ field: 'ActivationDate', title: 'ActivationDate', width: 80, editor: 'text' },
{ field: 'DataType', title: 'DataType', hidden: 'true' }
]],
onUnselect: function (rowIndex, rowData) {
alert('unselect');
if (lastselectedrow) {
$('#dg').datagrid('endEdit', lastselectedrow);
}
},
onSelect: function (rowIndex, rowData) {
alert('select');
lastselectedrow = rowIndex;
$('#dg').datagrid('beginEdit', rowIndex);
},
detailFormatter: function (index, row) {
return '<div style="padding:1px"><table id="ddv-' + index + '"></table></div>';
}
});
});
function doSearch() {
$('#tt').datagrid('load', {
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
}
}
I put two alert statements in onSelect and onUnselect events, onSelect is triggered when I click on a row. Since singleSelect property is true, selecting another row will result in an onUnselect and onSelect events, at least that's my understanding. When I click on rows only onSelect alert pops up, alert of onUnselect never pops up, can somebody point me how to capture onUnselect event? Any help will be appreciated.

there is an inherent bug that prevents invoking onUnselect event

celldblclick does not fired if the cell contains HTML extjs 3.4.0

I have the following EditorGridPanel on extJS:
http://jsfiddle.net/VDFsq/1/
Ext.onReady(function () {
var myData = [[ '<SPAN STYLE=\"text-align:Left;font-family:Segoe UI;font-style:normal;font-weight:normal;font-size:12;color:#000000;\"><P STYLE=\"font-family:Arial;font-size:16;margin:0 0 0 0;\"><SPAN><SPAN>HTML </SPAN></SPAN><SPAN STYLE=\"font-weight:bold;color:#FF0000;\"><SPAN>FORMAT</SPAN></SPAN><SPAN><SPAN> TEST<BR />TEST</SPAN></SPAN></P></SPAN>', "lisa#simpsons.com", "555-111-1224"],
[ 'Bart', "bart#simpsons.com", "555-222-1234"],
[ 'Homer', "home#simpsons.com", "555-222-1244"],
[ 'Marge', "marge#simpsons.com", "555-222-1254"]];
var store = new Ext.data.SimpleStore({
fields:[ {
name: 'name'
},
{
name: 'email'
},
{
name: 'phone'
}],
data: myData
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-container',
columns:[ {
header: 'Name',
dataIndex: 'name',
width:200
}
],
store: store,
frame: true,
height: 240,
width: 500,
enableColumnMove :false,
stripeRows: true,
enableHdMenu: false,
border: true,
autoScroll:true,
clicksToEdit: true,
title: 'HTML in Grid Cell',
iconCls: 'icon-grid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
grid.on({
celldblclick: function() {alert(1);}
});
});
the problem is, when the gridCell contains HTML data (which is my situation) when you double click on the cell with html the grid does not fire the event celldblclick.
in my application I need to display that kind of html in the grid.
how can fix this problem? anyway to bubble the event from the html to the grid?
Thanks

It seems that there is some limits to dom tree deep inside your structure. I think it is not good idea to put html into grid - if you can unify it structure - may be templates would be more useful.
Try this instead of your HTML:
"<div ondblclick=\"alert('1!')\">1<div ondblclick=\"alert('2!')\">2<div ondblclick=\"alert('3!')\">3<div ondblclick=\"alert('4!')\">4</div>3</div>2</div>1</div>"
Event inheritance works fine in this HTML, but works only 2 levels deep in your EXt example.
NOTE: if you try
grid.on('rowdblclick', function(eventGrid, rowIndex, e) {
console.log('double click');
}, this);
you will not get problem (but, obviously, you can dblclick only rows in this way)

ExtJS 4.1.1a: Item in grid is deselected after record has been modified with set-method

Hy there,
I have a very basic example with a grid with only 1 item and a button which updates this entry with the set-method of the underlying record.
The problem is, that if the item is selected at the time the record gets updated by pressing the button, the selection gets removed and it's not possible to select it anymore afterwards.
Working example: http://jsfiddle.net/fu2Xq/2/
Ext.onReady(function() {
var personsGrid = Ext.create('Ext.grid.Panel', {
width: 150,
height: 100,
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: [ 'name' ],
data: [{ name: 'Stephen' }]
}),
columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }],
});
var txtField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'New name',
labelWidth: 70,
width: 150,
value: 'Alex',
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: 'Rename person',
width: 150,
renderTo: Ext.getBody(),
handler: function() {
var rec = personsGrid.getStore().getAt(0);
rec.set('name', txtField.getValue());
}
});
});
Seems like a bug to me because after reordering the name-column the selection reappears...
I'd really appreciate some comment on this!
Thanks
edit: reformated some code...

It's a bug in ExtJS 4.1.1 which seems to be solved in 4.1.3 and can be worked around by calling the refresh-method of the grid's view after updating the record:
http://jsfiddle.net/fu2Xq/7/
handler: function() {
var rec = personsGrid.getStore().getAt(0);
rec.set('name', txtField.getValue());
personsGrid.getView().refresh();
}
I got this answer from the Sencha forum:
http://www.sencha.com/forum/showthread.php?253287-Item-in-grid-is-deselected-after-record-has-been-modified-with-set-method&p=928197&viewfull=1#post928197

On headerclick event of column headers, old selections from grid view have remembered and after rendering sorted view these records are getting selected again.
While in case of rec.set(), Instead of datachanged, 'update' event of Ext.data.store is getting fired. But there is no implementation related to select old records as same as headerclick on 'update' event.
So you have to implemet selection of records on after rec.set().
Here is discussion about similar issue.