We Keep Coding

How to preload css called in JS

How do I preload the css in the following code? I have updated my code with Denis suggestions, but it did not work. Now the pages are not finding css at all. I might be missing something since I do not have much about js. Am i missing something? Thanks again Denis, for your suggestion.
This is a free template that i downloaded somewhere. Its quite lite and solves my pbn needs while keeping the site blazing fast. But I have never seen a html template calling css from a js before. I know how to preload files in html, but no clue what would be the proper attribute for it to be used in a js. This can get me the 100 page score i have been trying for long. Any of JS masters help will be much appreciated.
(function($) {
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
}
}, {
layers: {
layers: {
navPanel: {
animation: 'pushX',
breakpoints: 'narrower',
clickToClose: true,
height: '100%',
hidden: true,
html: '<div data-action="navList" data-args="nav"></div>',
orientation: 'vertical',
position: 'top-left',
side: 'left',
width: 275
},
titleBar: {
breakpoints: 'narrower',
height: 44,
html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>',
position: 'top-left',
side: 'top',
width: '100%'
}
}
}
});
$(function() {
var $window = $(window);
// Forms (IE<10).
var $form = $('form');
if ($form.length > 0) {
$form.find('.form-button-submit')
.on('click', function() {
$(this).parents('form').submit();
return false;
});
if (skel.vars.IEVersion < 10) {
$.fn.n33_formerize=function(){var _fakes=new Array(),_form = $(this);_form.find('input[type=text],textarea').each(function() { var e = $(this); if (e.val() == '' || e.val() == e.attr('placeholder')) { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).blur(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } }).focus(function() { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) return; if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); _form.find('input[type=password]').each(function() { var e = $(this); var x = $($('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text')); if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield'); if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield'); x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e); if (e.val() == '') e.hide(); else x.hide(); e.blur(function(event) { event.preventDefault(); var e = $(this); var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } }); x.focus(function(event) { event.preventDefault(); var x = $(this); var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']'); x.hide(); e.show().focus(); }); x.keypress(function(event) { event.preventDefault(); x.val(''); }); }); _form.submit(function() { $(this).find('input[type=text],input[type=password],textarea').each(function(event) { var e = $(this); if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', ''); if (e.val() == e.attr('placeholder')) { e.removeClass('formerize-placeholder'); e.val(''); } }); }).bind("reset", function(event) { event.preventDefault(); $(this).find('select').val($('option:first').val()); $(this).find('input,textarea').each(function() { var e = $(this); var x; e.removeClass('formerize-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': e.val(e.attr('defaultValue')); x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]'); if (e.val() == '') { e.hide(); x.show(); } else { e.show(); x.hide(); } break; case 'checkbox': case 'radio': e.attr('checked', e.attr('defaultValue')); break; case 'text': case 'textarea': e.val(e.attr('defaultValue')); if (e.val() == '') { e.addClass('formerize-placeholder'); e.val(e.attr('placeholder')); } break; default: e.val(e.attr('defaultValue')); break; } }); window.setTimeout(function() { for (x in _fakes) _fakes[x].trigger('formerize_sync'); }, 10); }); return _form; };
$form.n33_formerize();
}
}
// Dropdowns.
$('#nav > ul').dropotron({
offsetY: -15,
hoverDelay: 0
});
});
})(jQuery);

You can use Object.keys for get array of breakpoints item, then you can appendChild to document.head
So, write code like this:
const item = {
reset: 'full',
breakpoints: {
global: { range: '*', rel: 'preload', href: 'css/style.css', containers: 1400, grid: { gutters: 50 } },
wide: { range: '-1680', rel: 'preload', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
normal: { range: '-1280', rel: 'preload', href: 'css/style-normal.css', containers: 960, lockViewport: true },
narrow: { range: '-980', rel: 'preload', href: 'css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
narrower: { range: '-840', rel: 'preload', href: 'css/style-narrower.css', grid: { gutters: 20, collapse: 1 } },
mobile: { range: '-640', rel: 'preload', href: 'css/style-mobile.css', grid: { gutters: 15, collapse: 2 } }
}
}
Object.keys(item.breakpoints).forEach(key=>{
var res = document.createElement("link");
res.rel = item.breakpoints[key].rel;
res.as = "style";
res.href = item.breakpoints[key].href;
document.head.appendChild(res)
})
See in playground: https://jsfiddle.net/denisstukalov/3euofv17/#&togetherjs=RqKywyBFh0

Onclick event in html tempelate ExtJs

Below is the code sample i'm trying to add a onclick function, but it seems not working as expected. The aim is to take the div tag text value and put it in a variable or return it through a func like myFunction I also tried adding listeners but don't know how it works . As its a template its hard to debug. and onclick event or call hierarchy is not easy to find. How to tackle it with simple javascript?
var resultTmpl = '<div id="group_header_{locationName}" class="current_list_audit_location expcol_{locationName:removeSpaces}" style="display:none;">'+
'<tpl for="pickslipid">' +
'<div class="audit_stage_list" style="margin-top: 6px !important;">' +
'<div class="orderpickingpicklistimageurlStage margin-top"></div>' +
'<div style="float:left;">' +
'<div class="orderpickingpicklistStagedesc orderpickingpicklistStagedesc2" id={pickupSlipId} onclick="myfunction()" > {pickupSlipId}</div></div>' +
'<div class="order_pick_right_stage_count_main_group_list audit_stage_pickup_date_list">' +
'<div>Pickup Date: {pickupDate}</div>' +
'</div>' +
'</div>' +
'</tpl>';
// pass the root node of the data object
Ext.define('sif.view.mapping.templates.EX04AuditStagingTpl', {
extend: "Ext.XTemplate",
html: resultTmpl,
myfunction : function(){
return document.getElementByClass("orderpickingpicklistStagedesc orderpickingpicklistStagedesc2").value;
},
constructor: function() {
console.log(resultTmpl);
return this.callParent([this.html]);
}
});
Ext.util.Format.removeSpaces = function(value) {
return !value ? value : String(value).replaceAll(" ", "_");
};
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
};
The above code is called from another class EX04AuditStagingLocation as given below:
var ex04AuditStagingList = Ext.create('sif.view.mapping.templates.EX04AuditStagingTpl');
var ex04AuditStageItems = {
xtype: 'panel',
width: '100%',
height: '100%',
cls: 'my-panel',
ui: 'plain',
itemId: 'ex04showdetailspanel',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'list',
cls: 'current_page_cycle_count',
store: 'AuditStagingStore',
itemTpl: ex04AuditStagingList,
itemHeight: '100%',
height: '100%',
emptyText: '<p id="empty-text" style="text-align:center; left: 25px;">' + PhoneTopUtil.getLocaleString(1280040) + '</p>',
grouped: true,
zIndex: 10,
pinHeaders: true,
style: 'font-family: RobotoRegular;',
loadingText: "",
itemId: 'ex04AuditStageList',
id: 'ex04AuditStageList',
listeners: {
painted: function(element, ths) {
SifUtils.customImageLoad(element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
refresh: function(element, options) {
SifUtils.customImageLoad(element.element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
itemtap: function(list, index, target, record) {
AuditOrMoveUtil.controller.onAmMoveAction(list, null, null, record);
},
}
}

jqgrid load save state data doesn't load dynamicly

I have jqgrid page with a lot of columns. Idea is to allow user choose columns and their order in table and save this order and column count in cookies. For this purposes I use $.jgrid.saveState() for saving and $.jgrid.loadState() for restoring jqgrid options from cookies. This methods works fine. But I don't want to save data to storage: only column order and filter. I tried option restoreData: false and storeData: false, but it didn't work.
Here the code of my jqgrid:
jQuery(function ($) {
var table = $("#table");
var pager = "#pager";
var search_panel = "#search";
var localization = globalLocale;
var colNames = [ "Mobile direction total time (sec)", "Mobile direction q-ty ", "Mobile time Percent",
"City direction total time (sec)", "City direction q-ty", 'City time Percent' ];
var exportToCsvBut = "Export to excell";
resizeToFitPageSize(table);
resizeOnSidebar(table);
$(function () {
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
var defCurDate = moment().startOf('day').format('DD.MM.YYYY HH:mm:ss');
var defNextDate = moment().endOf('day').format('DD.MM.YYYY HH:mm:ss');
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
$("#datetimepickerFrom").datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm:ss',
defaultDate: new Date(year, month, day + 1, 00, 00),
onClose: function () {
beforeRefresh();
}
});
$("#datetimepickerTo").datetimepicker({
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm:ss',
defaultDate: new Date(year, month, day + 1, 00, 00),
onClose: function () {
beforeRefresh();
}
});
defCurDate = $('#datetimepickerFrom').val();
defNextDate = $('#datetimepickerTo').val();
});
var initDate = function (elem) {
$(elem).datetimepicker({
dateFormat: 'd.m.Y H:i:s',
showButtonPanel: true
});
};
var template = {width: 160, fixed: true, align: 'center', editable: false, stype: 'text'};
var colModel = [
{
name: 'mobileDirectionTotalTime',
index: 'mobileDirectionTotalTime',
sortname: 'mobileDirectionTotalTime',
template: template,
formatter: nullFormatter,
sorttype: 'number'
},
{
name: 'mobileDirectionQty',
index: 'mobileDirectionQty',
sortname: 'mobileDirectionQty',
template: template,
formatter: nullFormatter,
sorttype: 'number'
},
{
name: 'mobileDirectionPercent',
index: 'mobileDirectionPercent',
sortname: 'mobileDirectionPercent',
width: 120,
fixed: true, align: 'center', editable: false,
template: "number",
sorttype: 'number'
},
{
name: 'cityDirectionTotalTime',
edittype: "custom",
sortname: 'cityDirectionTotalTime',
formatter: null,
sorttype: 'number'
},
{
name: 'cityDirectionQty',
index: 'cityDirectionQty',
sortname: 'cityDirectionQty',
template: template,
sorttype: 'number'
},
{
name: 'cityDirectionTimePercent',
index: 'cityDirectionTimePercent',
sortname: 'cityDirectionTimePercent',
template: template,
sorttype: 'number'
},
];
table.jqGrid({
url: URL_DATA,
datatype: "json",
jsonReader: {
repeatitems: true
},
height: 'auto',
colNames: colNames,
colModel: colModel,
shrinkToFit: false,
forceFit: true,
pager: pager,
toppager: true,
rowNum: 10,
rowList: [5, 10, 15, 20, 25, 30],
loadonce: true,
viewrecords: true,
storeNavOptions : true,
// navOptions: {reloadGridOptions: {fromServer: true}},
loadComplete: function () {
var table = this;
setTimeout(function () {
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
gridComplete: function () {
/*var idarray = table.jqGrid('getDataIDs');
if (idarray.length > 0) {
var firstid = table.jqGrid('getDataIDs')[0];
table.setSelection(firstid);
}*/
}
});
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
function beforeRefresh() {
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
resetFilter('table', 'globalSearchText');
table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
}
}
//navButtons
table.jqGrid('navGrid', pager,
{ //navbar options
cloneToTop: true,
edit: false,
add: false,
del: false,
search: true,
searchicon: 'ace-icon fa fa-search orange',
refresh: true,
beforeRefresh: function () {
var from = $('#datetimepickerFrom');
var to = $('#datetimepickerTo');
if (from.val() != null && from.val() != '' && to.val() != null && to.val() != '') {
resetFilter('table', 'globalSearchText');
table.jqGrid().setGridParam({datatype: 'json'}).setGridParam({url: URL_DATA + "?from=" + from.val() + "&to=" + to.val()}).trigger("reloadGrid")
if (from.val() === "" || to.val() === "") {
from.val(defCurDate);
to.val(defNextDate);
}
}
},
refreshicon: 'ace-icon fa fa fa-refresh green',
view: true,
viewicon: 'ace-icon fa fa-search-plus grey'
}, {}, {}, {},
{
multipleSearch: true,
searchOnEnter: true,
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
},
{
//view record form
recreateForm: true,
beforeShowForm: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
form.closest('div.ui-jqdialog').center();
}
}
);
addToolButton({
caption: "",
buttonicon: "ace-icon fa fa-calculator blue",
title: "Выбрать столбцы",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 550,
msel_opts: {dividerLocation: 0.5}, modal: true
});
$("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions')
.prepend('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Поиск:</label>');
}
}, table, pager);
addSearchField('table', 'globalSearchText');
$(window).triggerHandler('resize.jqGrid');
table.triggerHandler("jqGridAfterGridComplete");
destroyGrid(table);
$('#table')
.append($("<div style='margin-top: 10px'>" +
"<button id='savestate'>save state</button>" +"<button id='loadstate'>load state</button>" +
"</div>"));
$("#savestate").click(function(){
$.jgrid.saveState("table");
});
$("#loadstate").click(function(){
$.jgrid.loadState("table", {}, {});
})
});
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
Here the view of table page:
After user press load state and save state it displays data which was before but not actual:
It just show data which was saved in localstorage.
If I add storeData: false it just diplayed table with no data and doens't load new data from server.
Can anyone help?
P.S In case someone will have the same problem:
$("#table").jqGrid().setGridParam({datatype:'json'}).setGridParam({url : URL_DATA}).trigger("reloadGrid"); after $.jgrid.loadState("table", '', { restoreData: false}); will load new data in loaded grid.

I recommend you to use restoreData: false in loadState and after this command to reload the grid with trigger by example
$("#loadstate").click(function(){
$.jgrid.loadState("table", '', { restoreData: false});
$("#table").trigger("reloadGrid");
});
This will reload fresh grid data from server with the current setting

ExtJs Type Error

When I trying to add new row in the grid was the error h is undefined.I've tried understand why and I found that if scroller was in the down of scrollbar all was right,but if it was in other position was the error. I've tried to override ensureVisible because error was in that function but without any result and it's the library function I don't want to override that,error was in the row var cleft = parseInt(cellEl.offsetLeft, 10); ,so how can I resolve this bug?
Ext.override(Ext.grid.GridView, {
ensureVisible : function(row, col, hscroll) {
var resolved = this.resolveCell(row, col, hscroll);
if(!resolved || !resolved.row){
return;
}
var rowEl = resolved.row,
cellEl = resolved.cell,
c = this.scroller.dom,
ctop = 0,
p = rowEl,
stop = this.el.dom;
var p = rowEl, stop = this.el.dom;
while(p && p != stop){
ctop += p.offsetTop;
p = p.offsetParent;
}
ctop -= this.mainHd.dom.offsetHeight;
var cbot = ctop + rowEl.offsetHeight;
var ch = c.clientHeight;
var stop = parseInt(c.scrollTop, 10);
var sbot = stop + ch;
if(ctop < stop){
c.scrollTop = ctop;
}else if(cbot > sbot){
c.scrollTop = cbot-ch;
}
if(hscroll !== false){
var cleft = parseInt(cellEl.offsetLeft, 10);
var cright = cleft + cellEl.offsetWidth;
var sleft = parseInt(c.scrollLeft, 10);
var sright = sleft + c.clientWidth;
if(cleft < sleft){
c.scrollLeft = cleft;
}else if(cright > sright){
c.scrollLeft = cright-c.clientWidth;
}
}
return this.getResolvedXY(resolved);
},
});
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
selModel: new helpsys.AddRowSelectionModel({
singleSelect: true
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{
header: '',
menuDisabled: true,
width: 33,
dataIndex: '',
fixed: true,
renderer: this.renderOrder
},
{
menuDisabled: true,
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
autoCreate: {tag: 'input', type: 'text', maxlength: '10'},
listeners: {
blur: function(item){
var record = item.getValue();
record = Ext.util.Format.htmlEncode(record);
record = this.controllerThis.replaceAll("&apos;","'",record);
item.setValue(record);
}
}
}),
header: 'Library',
id: 'name'
},
{
header: '',
menuDisabled: true,
width: 35,
dataIndex: '',
fixed: true,
renderer: this.renderActions
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
allowEdit: true,
listeners: {
rowclick: {
fn: onRowClick,
scope: this
}
},
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
cls: "library-list-add-button",
text: "<span>Add </span>",
handler : function(){
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
var insertIndex;
var selectedRecord = this.libraryListGrid.getSelectionModel().getSelected();
if (selectedRecord) {
insertIndex = this.libraryListGrid.getStore().indexOf(selectedRecord) + 1;
}
else {
insertIndex = this.libraryListGrid.getStore().getCount();
}
this.libraryListGrid.stopEditing();
this.libraryListGrid.getStore().insert(insertIndex, p);
this.libraryListGrid.selModel.selectRow(insertIndex);
this.libraryListGrid.startEditing(insertIndex, 1);
},
scope: this
}],
view:this.view
});
},

How to determine what cell has been clicked?

I am new to JavaScript and I am having to use ExtJS 3.4. I have created a simple tree with 3 columns. I would like to know either what cell was selected, or even, just what row and column were selected.
I am just using the example that Sencha uses at http://dev.sencha.com/deploy/ext-3.4.0/examples/treegrid/treegrid.html :
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
dataUrl: 'treegrid-data.json'
});
Is it possible to do this in ExtJS 3.4? I can get the node but I do not see where it is telling me what cell or column or row was selected.
Any help would be greatly appreciated!

you need to attach listeners e.g.
listeners: {
afterRender: function(p) {
p.body.on('click', function() { // Function tapping clicks on Panel
alert(p.getTargetEl().dom.innerHTML);
});
});
}