Develop Reference

Facing problem in "DOMContentLoaded" in jquery. without this jqgrid is loading , when adding this "DOMContentLoaded" not loading

Facing problem in "DOMContentLoaded" in jquery. without this jqgrid is loading , when adding this "DOMContentLoaded" not loading
document.addEventListener("DOMContentLoaded", function() {
$("#table").jqGrid({
url: ROOT + 'PCM/DataToDisplayPCM',
datatype: "JSON",
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
colModel: [{
name: 'ProdPriority',
label: 'Priority',
index: 'ProdPriority',
width: 50
}, {
name: 'ProductCode',
label: 'Product Code',
index: 'ProductCode',
width: 80
}, {
name: 'ProductName',
label: 'Product Name',
index: 'ProductName',
width: 200
}, {
name: 'DIV',
label: 'Division',
index: 'Division',
width: 60
}, {
name: 'Category',
label: 'Categary',
index: 'Category',
width: 150
}, {
name: 'SubCategory',
label: 'SubCategary',
index: 'SubCategory',
width: 150
}, {
name: 'Priority_1',
label: 'Priority_1',
index: 'Priority_1',
width: 80
}, {
name: 'Priority1per',
label: 'Priority_1%',
index: 'Priority1per',
width: 80
}, {
name: 'Priority_2',
label: 'Priority_2',
index: 'Priority_2',
width: 80
}, {
name: 'Priority2per',
label: 'Priority_2%',
index: 'Priority2per',
width: 80
}, {
name: 'Priority_3',
label: 'Priority_3',
index: 'Priority_3',
width: 80
}, {
name: 'Priority3per',
label: 'Priority_3%',
index: 'Priority3per',
width: 80
}, ],
pager: "#prowed1",
sortname: 'P_CODE',
viewrecords: true,
sortorder: "desc"
});
jQuery("#table").jqGrid('navGrid', "#prowed1", {
edit: false,
add: false,
del: false
});
});

ExtJs Table layout border missing and cell color

I am trying to design a simple risk assessment matrix in ExtJs but facing two problems.
border is missing for the cells with combobox in it.
I want to set the whole cell background red. not just a part of it.
Please look at this fiddle for better explanation.

For border you need to use config tdAttrs and for change background color of particular cell you need to use cellCls
In this Fiddle, I have created a demo using your code and used tdAttrs and cellCls.
CODE SNIPPET
Ext.create('Ext.TabPanel', {
name: 'myContainer',
id: 'myContainer',
renderTo: Ext.getBody(),
items: [{
title: 'Assessment',
name: 'assessmentPanel',
id: 'assessmentPanel',
layout: {
type: 'table',
tdAttrs: {
style: {
border: '1px solid #ccc'
}
},
// The total column count must be specified here
columns: 5
},
defaults: {
// applied to each contained panel
bodyStyle: 'padding:30px',
html: 'Risk',
scroll: false,
//border: true
//margin: '0 15 0 0'
},
items: [{
html: '<font color="white">Risk</font>',
//cellCls: 'first-row',
listeners: {
afterrender: function (view) {
console.log('view config entered!!');
//this.up('view').addCls('first-row');
//view.addCls('first-row');
}
}
}, {
html: '<b>Consequence</b>'
}, {
html: '<b>Likelihood</b>'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: '<b>Risk</b>'
}, {
html: '<b>Service Interruption</b>'
}, {
xtype: 'combobox',
name: 'assessment1',
id: 'assessment1',
cellCls: 'demo',
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
cls: 'bg-trasparent',
value: 'red',
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Red',
value: 'red'
}, {
text: 'Gray',
value: 'gray'
}, {
text: 'Green',
value: 'green'
}, {
text: 'Yellow',
value: 'yellow'
}, {
text: 'Blue',
value: 'blue'
}]
}),
listeners: {
select: function (combo, record) {
combo.el.dom.closest('td').style.background = record.get('value')
}
}
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Revenue Growth</b>'
}, {
xtype: 'combobox',
name: 'assessment2',
id: 'assessment2',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Reputation</b>'
}, {
xtype: 'combobox',
name: 'assessment3',
id: 'assessment3',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Legal and Compliance</b>'
}, {
xtype: 'combobox',
name: 'assessment4',
id: 'assessment4',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Capital Items</b>'
}, {
xtype: 'combobox',
name: 'assessment5',
id: 'assessment5',
value: 'Minor',
width: 130,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
html: '<b>Financial</b>'
}, {
xtype: 'combobox',
name: 'assessment6',
id: 'assessment6',
value: 'Minor',
width: 130,
height: 5,
queryMode: 'local',
displayField: 'text',
valueField: 'value',
editable: false,
store: Ext.create('Ext.data.Store', {
data: [{
text: 'Minor',
value: 'minor'
}, {
text: 'Moderate',
value: 'moderate'
}, {
text: 'Major',
value: 'major'
}, {
text: 'Severe',
value: 'severe'
}]
})
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}, {
height: 20,
cellCls: 'noborder'
}, {
height: 20,
cellCls: 'noborder'
}, {
height: 20,
cellCls: 'noborder'
}, {
width: 20,
height: 20,
cellCls: 'noborder'
}, {
height: 20,
cellCls: 'noborder'
}, {
html: '<b>Highest Risk</b>'
}, {
html: 'Minor'
}, {
html: 'Cell F content'
}, {
width: 20,
cellCls: 'noborder'
}, {
html: 'Cell F content'
}]
}]
});
CSS CODE
<style>
.demo {
background: red;
}
.noborder {
border: 0px !important;
}
.bg-trasparent input {
background: transparent;
color: #fff;
font-weight: bold
}
</style>

Javascript trouble with callbacks

I'm trying to create a simple GUI with the library w2ui.
But I'm having an issue while adding a toolbar to my main layout.
The toolbar is added before the layout is build.
I'm not very familiar with javascript callbacks as I am still learning.
Here is my javascript code :
function buildMainLayout(toolbar) {
$(function () {
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top', id: 'toolbar' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
{ type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
]
});
}, toolbar);
$('#layout').height($( window ).height());
}
function buildMainToolbar(callback) {
$().w2toolbar({
name: 'toolbar',
items: [
{ type: 'check', id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
{ type: 'break', id: 'break0' },
{ type: 'menu', id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
{ text: 'Item 1', icon: 'icon-page' },
{ text: 'Item 2', icon: 'icon-page' },
{ text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
]},
{ type: 'break', id: 'break1' },
{ type: 'radio', id: 'item3', group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
{ type: 'radio', id: 'item4', group: '1', caption: 'Radio 2', icon: 'fa-star-empty' },
{ type: 'spacer' },
{ type: 'button', id: 'item5', caption: 'Item 5', icon: 'fa-home' }
]
}, callback);
}
function addToolbar() {
w2ui['layout'].content('top', w2ui['toolbar']);
}
Here is how I call it :
buildMainLayout(buildMainToolbar(addToolbar));
I also made a jsfiddle for my problem :
https://jsfiddle.net/e1x1cg8j/5/
Any help would be appreciated,
Thanks in advance.

I've search around but couldn't find any example using the callback as in your code.
I think that maybe you should use onRender option instead.
Something like this:
function buildMainLayout() {
$(function () {
var pstyle = 'background-color: #F5F6F7; border: 1px solid #dfdfdf; padding: 5px;';
$('#layout').w2layout({
name: 'layout',
panels: [
{ type: 'top', size: 50, resizable: true, style: pstyle, content: 'top', id: 'toolbar' },
{ type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' },
{ type: 'main', style: pstyle, content: 'main' },
{ type: 'preview', size: '50%', resizable: true, style: pstyle, content: 'preview' },
{ type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' },
{ type: 'bottom', size: 50, resizable: true, style: pstyle, content: 'bottom' }
],
onRender: buildMainToolbar
});
});
$('#layout').height($( window ).height());
}
function buildMainToolbar() {
$().w2toolbar({
name: 'toolbar',
items: [
{ type: 'check', id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
{ type: 'break', id: 'break0' },
{ type: 'menu', id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
{ text: 'Item 1', icon: 'icon-page' },
{ text: 'Item 2', icon: 'icon-page' },
{ text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
]},
{ type: 'break', id: 'break1' },
{ type: 'radio', id: 'item3', group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
{ type: 'radio', id: 'item4', group: '1', caption: 'Radio 2', icon: 'fa-star-empty' },
{ type: 'spacer' },
{ type: 'button', id: 'item5', caption: 'Item 5', icon: 'fa-home' }
],
onRender: addToolbar
});
}
function addToolbar() {
w2ui['layout'].content('top', w2ui['toolbar']);
}
buildMainLayout();
I'm not sure if this is the right event though.
Look into this list of events available for the layout.
-------- EDIT ---------
Also check into this

EXT Multiple Paging Toolbars Only 1 Works

My basic problem is this, I have a page with 3 grids, all of which have paging toolbars. All grid render on page load. When the page loads, only 1 of the 3 toolbars actually works. The other 2 don't show page numbers, and all buttons are greyed out. I've tried everything I can think of, but if they all populate on page load, only 1 works. If they render separately, say with a button click on the page, the toolbars work perfectly.
Has anyone else had this issue and solved it?

Multiple Grid and Multiple Paging Toolbar in single Window on page Load in Extjs
Ext.onReady(function () {
var userStore = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
var userStore1 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
var userStore2 = Ext.create('Ext.data.Store', {
autoLoad: 'false',
fields: [
{ name: 'name' },
{ name: 'email' },
{ name: 'phone' }
],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' },
]
});
Ext.create('Ext.window.Window', {
height: 600,
width: 400,
xtype: 'panel',
layout: 'fit',
title:'Multiple Grid and Multiple Toolbar in single Window on page Load',
items:
[
{
layout: 'border',
height: 350,
renderTo: Ext.getBody(),
items:
[
{
xtype: 'panel',
region: 'north',
layout: 'fit',
items: [
{
xtype: 'grid',
store: userStore1,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore1,
dock: 'bottom',
displayInfo: true,
},
]
},
{
xtype: 'panel',
region: 'center',
items: [
{
xtype: 'grid',
store: userStore2,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
},
],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore2,
dock: 'bottom',
displayInfo: true,
}]
},
{
xtype: 'panel',
region: 'south',
items: [
{
xtype: 'grid',
id: 'GridId',
store: userStore,
columns: [
{
header: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
header: 'Email Address',
width: 150,
dataIndex: 'email',
},
{
header: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
}],
dockedItems: [
{
xtype: 'pagingtoolbar',
itemId: 'pagingLog',
store: userStore,
dock: 'bottom',
displayInfo: true,
}]
}]
}]
}).show();
});

Form Validation isn't working in ExtJS

I tried to add validation to my form using formBind: true
The validation isn't occuring though (the save button is not greyed out). The validation that the text field is not blank is occuring, but binding it to the Save button seems to do nothing.
If you double click a record it will show the form in question. This can be seen here:
http://jsfiddle.net/byronaltice/7yz9oxf6/32/
Code below in case anyone can't access jsfiddle:
Ext.application({
name: 'MyApp',
launch: function () {
//Popup form for items in grid panel
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
padding: 5,
width: 600,
title: 'Edit Sessions',
model: 'true',
items: [{
xtype: 'form',
bodyPadding: 10,
title: '',
items: [{
xtype: 'textfield',
name: 'title',
fieldLabel: 'Title',
labelWidth: 90,
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
allowBlank: false
}, {
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved'
}]
}, {
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Save',
formBind: 'true',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
//The grid panel area
Ext.define("SessionGridPanel", {
extend: 'Ext.grid.Panel',
alias: 'widget.sessionGridPanel',
listeners: {
itemdblclick: function (gridpanel, record, item, e) {
var formWindow = Ext.create('SessionForm');
formWindow.show();
var form = formWindow.down('form');
form.loadRecord(record);
}
},
store: {
fields: [
'id', {
name: 'title',
sortType: 'asUCText'
},
'approved', {
dateFormat: 'c',
name: 'sessionTimeDateTime',
sortType: 'asDate',
type: 'date'
}, {
convert: function (v, rec) {
var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'),
pretty = convertIt(rec.get("sessionTimeDateTime"));
return pretty;
},
name: 'sessionTimePretty',
type: 'string'
}],
autoLoad: true,
autoSync: true,
data: [{
id: 101,
sessionTimeDateTime: '2014-08-27T21:00:00.000+0000',
title: 'JS for D',
approved: true
}, {
id: 102,
sessionTimeDateTime: '2014-10-27T22:30:00.000+0000',
title: 'CS for S',
approved: false
}, {
id: 105,
sessionTimeDateTime: '2014-09-27T20:30:00.000+0000',
title: 'XxtJS for E',
approved: false
}, {
id: 104,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ZXxtJS for E',
approved: true
}, {
id: 103,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ExtJS for E',
approved: true
}],
sorters: [{
property: 'title'
}],
groupField: 'sessionTimeDateTime'
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'title',
text: 'Title',
flex: 1,
minWidth: 100,
width: 75
}, {
xtype: 'gridcolumn',
dataIndex: 'approved',
text: 'Approved'
}, {
dataIndex: 'sessionTimePretty',
text: 'Session Start Time',
width: 180
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: [
'{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})']
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'border'
//align: 'stretch'
},
items: [{
region: 'west',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
split: true,
items: [{
xtype: 'sessionGridPanel',
flex: 1
}, {
xtype: 'splitter',
width: 1
}, {
html: '<b>Speakers Panel</b>',
flex: 1,
xtype: 'panel'
}]
}, {
region: 'center',
html: '<b>Details Panel</b>',
flex: 1,
xtype: 'panel',
title: 'Details Panel',
collapsible: true,
collapsed: true,
collapseDirection: 'right'
}]
});
}
});

From Sencha API Documentation:
Any component within the FormPanel can be configured with formBind: true.
The problem is you are using the attribute formBind outside the form component
You can correct your code in this way:
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
// ...
items: [{
xtype: 'form',
items: [{
// your form items
}],
buttons: [{
xtype: 'button',
text: 'Save',
formBind: true,
handler: function (button) {
// also you should rewrite the following line
// to make it independant from the components structure
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
Your fiddle changed: http://jsfiddle.net/7yz9oxf6/34/