We Keep Coding

EXTJS 5.1.1: Paging toolbar - IE8 - Layout Run Failed

I'm encountring a problem with the paging toolbar of EXTJS 5.1.1 which raises an Layout Run failed in IE 8. it's working fine on chrome and firefox ..
when I remove the toolbar, my grid is fine.
Here is my code:
Ext.define('MyApp.view.overview.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.overviewlist',
requires: [
'Ext.form.field.ComboBox',
'Ext.form.field.Date',
'Ext.button.Button',
'Ext.grid.column.Action',
'Ext.grid.View',
'Ext.grid.column.Date',
'Ext.form.field.Number',
'Ext.form.field.TextArea',
'Ext.toolbar.Paging',
'Ext.grid.plugin.RowEditing'
],
title: 'KPIs Overview',
titleAlign: 'center',
store: 'Overviews',
itemId: 'overview-grid',
width: 900,
layout:'fit',
height: 650,
dockedItems:
[
{
xtype:'toolbar',
dock: 'top',
autoScroll: true,
itemId : 'toolbar',
items : [
{
xtype: 'combo',
itemId:'unitCombo',
fieldLabel: 'Unit',
labelWidth: 30,
width: 120,
margin: '0 0 0 0',
store: 'Units',
queryMode: 'local',
displayField: 'unit',
valueField: 'unit'
},
{
xtype: 'combo',
itemId: 'rcCombo',
fieldLabel: 'RC',
labelWidth: 25,
width: 115,
margin: '0 10 0 10',
store: 'Rcs',
queryMode: 'local',
displayField: 'rc',
valueField: 'rc'
},
{
xtype: 'combo',
itemId:'appCombo',
fieldLabel: 'Application',
labelWidth: '50px',
margin: '0 10 0 0',
store: 'Applications',
queryMode: 'local',
displayField: 'name',
valueField: 'id'
},
'-',
{
xtype : 'datefield',
itemId : 'fromCombo',
name : 'fromCombo',
format : 'F-Y',
fieldLabel: 'From',
labelWidth: 30,
width: 130
},
{
xtype : 'datefield',
itemId : 'toCombo',
name : 'toCombo',
format : 'F-Y',
fieldLabel: 'To',
labelWidth: 20,
width: 120
},
{
name:'searchButton',
itemId:'searchButton',
text:'Search'
},
{
name:'resetButton',
itemId:'resetButton',
text:'Reset'
}
]
},
**{
xtype: 'pagingtoolbar',
height: 60,
pageSize: 12,
store: 'Overviews',
items: [
{
xtype: 'combobox',
itemId: 'pagerCombo',
width: 120,
fieldLabel: 'Nb. rows',
labelWidth: 60,
editable: false,
store: [
12,
24,
36,
"All"
]
},
'->',
{
xtype: 'button',
itemId:'xlsxExport',
href: '#',
iconCls: 'xlsx-button',
scale: 'large',
autoWidth: true,
autoHeight: true,
tooltip:'Export to excel'
}
]
}**
],
columns: [
{
.......
},
{
xtype: 'gridcolumn',
........
}
],
plugins: [
{
ptype: 'rowediting',
pluginId: 'rowEditor',
clicksToEdit: 2,
autoCancel: false
}
]
});
The toolbar is working fine, but the pagingtoolbar is not.. !
I tried with dock: 'bottom', dock: 'top' and without, it's the same error on IE ...
Can someone help me please?

ExtJS : Date picker 'monthspinner' picker not working in Chrome

Date picker with monthspinner is not working in Chrome. But works perfectly fine in IE.
items: [{
xtype: 'combo',
queryMode: 'local',
triggerAction: 'all',
forceSelection: true,
emptyText: 'Date Range Type',
fieldLabel: 'RSP Topic Range',
editable: false,
hidden: false,
disabled: false,
name: 'dateTopicRangeType',
displayField: 'name',
valueField: 'value',
value: 'date_range',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'value'],
data: [
{name : 'RSP Month', value:'rsp_month'},
]
})
},{
xtype: 'fieldset',
name: 'fs_topic_rsp_month',
filterGroup: 'topic_range',
hidden: true,
disabled: true,
items: [{
fieldLabel: 'Month',
anchor: '98%',
labelWidth: 120,
labelAlign: 'right',
editable: false,
allowBlank: false,
width: 320,
name: 'topic_rsp_month',
xtype: 'monthspinner',
value: Ext.Date.format(startDate,'M, Y')
}]
}]
IE is populating the initial value. But just shows mm/dd/yyyy in chrome.
I am getting this error in console.
Uncaught TypeError: Cannot read property 'getTime' of undefined
The specified value 'Apr, 2015' does not conform to the required format, 'yyyy-MM-dd'.
Thanks in advance.

EXT JS: How to load selected grid row into window?

User Form
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
dockedItems: [{
xtype:'toolbar',
dock: 'bottom',
items:[{
iconCls: 'icon-user-add',
text: 'Add',
scope: this,
itemId: 'addButton'
},{
iconCls: 'icon-reset',
itemId:'resetButton',
text: 'Reset',
scope: this
},{
iconCls: 'icon-save',
itemId: 'savebutton',
text: 'Save',
disabled: true,
scope: this
}]
}]
});
This is my grid which displays user input. On row double click a window launches but its empty. How do i display the information from the selected row in the grid in the window?
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
columns: [{
text: 'Name',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'name'
},{
text: 'Age',
sortable: true,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'age'
},{
text: 'Phone Number',
sortable: false,
resizable: false,
draggable: false,
hideable: false,
dataIndex: 'phnumber'
}]
});
Thanks in advance!

you need to add refs to window objects
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
ref : '../name'
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false,
ref : '../age'
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false',
ref : '../phnumber'
}],
and set data to them when you show window.
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.name = record.get('name');
win.age = record.get('age');
win.prohne = record.get('phone');
win.show();
}

Add a form property to Grid as a reference to form, and also a showForm() function that when a user click on Add or dblClick on row's grid, you call it with id of selected row or null(when click add). showForm() checks the form reference, if it's null, create an instance of form and call this.form.loadFormData(id)
Ext.define('Patients.view.Grid',{
extend: 'Ext.grid.Panel',
store:'PatientsInfo',
xtype: 'patients_grid',
selType: 'rowmodel',
listeners:{
itemdblclick: function(record){
var win = Ext.create("Ext.Window",{
title: 'Patients Window',
height: 160,
width: 160,
})
win.show();
}
},
form:null,
showForm:function(id){
if(!form) this.form = new Patients.view.Form();
this.form.loadFormData(id);
},
//columns:....
and in form in loadFormData() you make a decision depend on id. if it is null create an instance of Model and load it, else retrieve record(with all your desire fields) and load it.
Ext.define('Patients.view.Form',{
extend: 'Ext.form.Panel',
xtype: 'patients_form',
title: 'Patient Info',
defaultType: 'textfield',
items: [{
fieldLabel:'Name',
name: 'name',
allowBlank: false,
},{
fieldLabel: 'Age',
name: 'age',
allowBlank: false
},{
fieldLabel: 'Phone',
name: 'phnumber',
allowBlank: 'false'
}],
// docked items and else...
loadFormData:function(id){
var me = this.
if(!id){
var record = new Patients.model.User();
this.loadRecord(record);
}
else{
var record = Patients.model.User.load(id,{
callback:function(record){
me.loadRecord(record);
var win = Ext.view.Window({
items:[me],
});
win.show();
}
}
}
}
Ext.data.Model.load() is static method.
Finally you create a window and add the form to it and call show()

Extjs Form with dynamically shown/hidden fields on combo selection

Using Ext 4.1 I'd like to create a form with select combo, and depending on the currently selected option different subfields would be shown/hidden. Example below :
Right now I have a combo and a set of two date fields that are hidden on render. When a combo value is changed I have an event listener that will display those fields. But I'm not sure if it's the best method to tackle this. Would a fieldset work better in this case ?
Ext.define('TooltipForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
initComponent: function(){
this.on('afterrender', this.onAfterRender, this);
this.callParent(arguments);
},
onAfterRender: function(){
this.items.each(function(item){
item.on('change', this.onChange, this);
}, this);
},
onChange: function(field, newValue){
if (field.name === 'range'){
switch(newValue){
case 'fit':
console.log('fit view');
break;
case 'complete':
console.log('complete view');
break;
case 'date range':
console.log('date range view');
break;
}
}
},
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [
{
width: 50,
xtype: 'combo',
mode: 'local',
value: 'fit',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: me.rangeFieldLabel,
name: 'range',
queryMode: 'local',
store: ['fit', 'complete', 'date range']
},
{
width:50,
xtype: 'datefield',
fieldLabel: 'date from',
name: 'datefrom',
hidden: true
},
{
width:50,
xtype: 'datefield',
fieldLabel: 'date to',
name: 'dateto',
hidden:true,
}
]
});

Something along these lines:
Ext.define('TooltipForm', {
extend: 'Ext.form.Panel',
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,
rangeFieldLabel: 'Foo',
initComponent: function() {
Ext.apply(this, {
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
items: [{
itemId: 'range',
width: 50,
xtype: 'combo',
value: 'fit',
triggerAction: 'all',
forceSelection: true,
editable: false,
fieldLabel: this.rangeFieldLabel,
name: 'range',
queryMode: 'local',
store: ['fit', 'complete', 'date range']
}, {
itemId: 'dateFrom',
width: 50,
xtype: 'datefield',
fieldLabel: 'date from',
name: 'datefrom',
hidden: true
}, {
itemId: 'dateTo',
width: 50,
xtype: 'datefield',
fieldLabel: 'date to',
name: 'dateto',
hidden: true,
}]
});
this.callParent(arguments);
this.child('#range').on('change', this.onChange, this);
},
onChange: function(field, newValue) {
switch(newValue) {
case 'fit':
console.log('fit view');
// do something else
break;
case 'complete':
this.child('#dateFrom').hide();
this.child('#dateTo').hide();
break;
case 'date range':
this.child('#dateFrom').show();
this.child('#dateTo').show();
break;
}
},
});
Ext.onReady(function(){
new TooltipForm({
renderTo: document.body
});
});

extJs column layout issue

I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function () {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
}
}
});

The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).
This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.