If you use the code with the default buttons:
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
});
the buttons on the window are in the order yes - no - cancel. I would like them in the order cancel - no - yes for consistency in my app. Is there a way to add a different configuration or change this for my needs?
Default buttons is simply created within Ext.window.MessageBox.makeButton() private method based on Ext.window.MessageBox.buttonIds config and show / hide based on bitmask buttons: Ext.Msg.YESNOCANCEL.
So we just have to override buttonIds config and bitmasks:
Ext.define('Ext.overrides.MessageBox', {
override: 'Ext.window.MessageBox',
OK: 1, //0001
CANCEL: 2, //0010
NO: 4, //0100
YES: 8, //1000
OKCANCEL: 3, //0011
YESNO: 12, //1100
YESNOCANCEL: 14, //1110
buttonIds: [
'ok', 'cancel', 'no', 'yes'
]
});
Ext.Msg / Ext.MessageBox is singletones and initially defined as instance of Ext.window.MessageBox before our override (check last lines of Ext.MessageBox code).
So we have to override Ext.Msg / Ext.MessageBox aswell:
Ext.Msg = Ext.MessageBox = new Ext.window.MessageBox();
Check this simple fiddle.
Related
iam jqgrid ver 4.15 iam have a problem ..i want add inline record .
filed name is required
{ name: "Name", width: 200, editable: true ,
editrules: {required: true}
}
I want when show position center info_dialog jqGrid popup modal .
iam use help this links and other links but don't work
how to center jqGrid popup modal window?
plase see this demo https://jsfiddle.net/dnfk8hmr/178/
iam want error modal in aling center
enter image description here
You write about adding inline record. Inline editing means editing fields inside of jqGrid. Modal windows will be used in case of form editing. What editing mode you really need to use?
As a workaround I can suggest you to combine form editing with inline editing. You can use form editing for Add operation and inline editing for editing existing lines. The corresponding code could looks like
$("#grid").jqGrid({
...
navOptions: {
edit: false,
del: false,
search: false,
refresh: false
},
inlineNavOptions: {
add: false,
edit: true
},
formEditing: {
beforeShowForm: function ($form) {
var $dlgDiv = $form.closest(".ui-jqdialog"),
dlgWidth = $dlgDiv.width(),
dlgHeight = $dlgDiv.height(),
dlgStyle = $dlgDiv[0].style,
$gridDiv = $(this).closest(".ui-jqgrid"),
gridWidth = $gridDiv.width(),
gridHeight = $gridDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgStyle.top = Math.round((gridHeight - dlgHeight) / 2) + "px";
dlgStyle.left = Math.round((gridWidth - dlgWidth) / 2) + "px";
}
}
}).jqGrid("filterToolbar")
.jqGrid("navGrid")
.jqGrid("inlineNav");
see https://jsfiddle.net/dnfk8hmr/196/
UPDATED: If you want to position the dialog in the middle of window instead of the middle of grid and if you include jQuery UI JS file additionally to CSS then the code could be the following
formEditing: {
afterShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({
my: "center",
at: "center",
of: window
});
}
}
see https://jsfiddle.net/dnfk8hmr/202/
We are working with software supplied by a third party, and we are not allowed to modify it, can use only overrides.
I would like to create a new button and overlay it on top of a text input so that they are close together.
I'm having trouble getting the overlay to align, instead it appears top left on the screen. So of course it doesn't align to the text input. Sample code is below, in this case implemented in the view initComponent override after this.callParent([]); is called.
var viewport = Ext.ComponentQuery.query('viewport')[0];
var overlay = viewport.add({
xtype: 'panel',
fullscreen: true,
left: 0,
top: 0,
width: 120,
height: 40,
items:[{
xtype: 'button',
text: 'Find Address',
handler: function() {
alert('Got it!');
}
}],
styleHtmlContent: true
});
var textField = this.query('*[itemId=textField]')[0];
overlay.showBy(textField, 'c-c?');
I've tried using floating: true and lots of other approaches.
Once I get it to position properly, is there a way to have the button respond to tab order correctly? That is, tab out of the text field, then have the button get focus?
As I understand from your question, you have trouble with setting position to a component. If it is the problem, you can set xy coordinate. Look at this fiddle:
https://fiddle.sencha.com/#fiddle/tpl
viewport.down('#idOverlay').setXY([150, 140]);
Edit:
Ext.define('OverriddenViewport', {
override: 'ExampleViewPort',
initComponent: function() {
// Set up first
this.callParent([]);
this.add(overlay);
this.addListener('afterrender', function(viewport) {
viewport.down('#idOverlay').setXY([220,50]);
viewport.down('#idButton').addListener('blur', function(button) {
viewport.down('#idTextfield').focus();
console.log('textfield is focussed');
});
viewport.down('#idTextfield').addListener('blur', function(button) {
viewport.down('#idButton').focus();
console.log('button is focussed');
});
});
}
});
If you can access the source (just to look around) you maybe can create an override of the corresponding class. Create a override, and copy all of the code of the class (form?) into your override.
Here some additional info about creating overrides in ExtJs:
http://moduscreate.com/writing-ext-js-overrides/
https://sencha.guru/2014/12/04/abstract-vs-override/
In your override create a trigger (on the field you want to expand) with your functionality:
{
fieldLabel: 'My Custom Field',
triggers: {
foo: {
cls: 'my-foo-trigger',
handler: function() {
console.log('foo trigger clicked');
}
}
}
}
I have a slider I have implemented on my site and wanted to land on a specific value when clicking on a link on another page:
Here is the script and the parameter I would like to change:
$("#screeningSlider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: 20,
min: 1,
max: 2000,
step: 0,
grid_num: 4,
prettify_separator: ",",
postfix: " Units",
max_postfix: "+",
force_edges: true,
});
So when on another page, I'd like to click on a button that would allow me to land on this page, But the parameter FROM to be 10 instead of the default value above. This should only occur when selecting from that specific button.
Here is my site that has the slider: http://therrd.com/screening.html#tenant-Screening
Sharing JavaScript values between pages isn't really possible without storing it in some other form, and then parsing it back into JavaScript.
You could use URL parameters and then parse the incoming URL and import the default from value from there.
<a href='http://www.yoursite/?from=10'>Referral </a>
The downside to this is, obvious, anyone could just peek at your URL and then try and game your system (think what may happen if they set it to ?from=0 and you didn't protect against that). You'd also need to protect against injection attacks.
You could use localStorage to set a key after they've clicked that specific button, and then check localStorage for that key when loading the main page to get the expected default from value.
Set the value on click for the special link:
$('#link').on('click', function(){
localStorage.setItem('fromValue', 10);
});
And retrieve it on load for the resulting page:
var fromValue = localStorage.getItem('fromValue')
if (fromValue) { /* adjust the slider's default from value*/ }
If you don't want to use server side for that, you can do it this way
[EDITED]
1 - set the link
Go
2 - set your function in yourpage.html
vals = {max: 100, min: 0, def: 20} //use your own values here for max min and def
var param = window.location.href.split("slide=");
slide = isNaN(param[param.length - 1]) ||
param[param.length - 1] > vals.max ||
param[param.length - 1] < vals.min ? vals.def : param[param.length - 1];
//check if there is a url param, if it's a number and if it's in range
$("#screeningSlider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: slide,
min: 1,
max: 2000,
step: 0,
grid_num: 4,
prettify_separator: ",",
postfix: " Units",
max_postfix: "+",
force_edges: true,
});
I am using this script http://ned.im/noty/
for showing notifications
var n = noty({
text: message,
type: type,
dismissQueue: true,
force: true,
layout : "bottomLeft",
theme: 'newTheme',
maxVisible : 5
});
So this is the current config, it has queued 5 items. The problem is that I can't figure out how to remove the first notification on showing new one, when a button is clicked.
Any ideas are welcome.
Okay I figured it out using the noty.js API: http://ned.im/noty/#api
first I defined the top notification
var notyclose_id = $("#noty_bottomLeft_layout_container>li:first-child>.noty_bar").attr('id');
after that I get the amount of notifications
var noty_list_count = $("#noty_bottomLeft_layout_container li").size();
than I check if this amount is bigger or equal to my notifications setting
if(noty_list_count >= 5)
$.noty.close(notyclose_id);
and if yes I use the api to close it. :)
Was looking for this and ended up here; current version for the time being (3.1.0) allows you to use the killer option:
noty({
text: 'I have just killed it',
type: 'success',
killer : true
})
Looks like it "kills" all previous notifications in the queue, making "this one" the only one displayed.
You can also consider an auto removal timeout. That's what I do with information and success messages: they disappear automatically after 3 seconds (timeout: 3000). I leave the error and warning messages permanent (user has to click it to be removed, timeout: false, that's the default).
This way it's less likely that things pile up and requires less user interaction. Less friction. I don't know if it fits your use-case though.
noty({
text: 'Sucessfully persisted xy value',
layout: 'bottomRight',
type: 'success',
timeout: 3000,
animation: {
open: 'animated zoomInUp', // Animate.css class names
close: 'animated zoomOutUp' // Animate.css class names
}
});
noty({
text: 'Error while writing value xy',
layout: 'bottomRight',
type: 'error',
animation: {
open: 'animated zoomInUp', // Animate.css class names
close: 'animated zoomOutUp' // Animate.css class names
}
});
if your are using layout as 'topRight' then given below code is helpful.
var notyclose_id = $("#noty_topRight_layout_container>li:first- child>.noty_bar").attr('id');
var noty_list_count = $("#noty_topRight_layout_container li").size();
if(noty_list_count >= 6) {
$.noty.close(notyclose_id);
}
you also need to call $.notyRenderer.show() to show a new message, it's already there but you need to call it everytime
if(instance.options.maxVisible > 0) {
//if($(instance.options.layout.container.selector + ' > li').length < instance.options.maxVisible) {
$.notyRenderer.show($.noty.queue.shift());
//}
//else {
//}
}
I am working with a TabContainer having several different ContentPane children. Each of them is equipped with a href param to fetch external AJAX content shown when a tab is being selected:
dojo.addOnLoad(function() {
var tc_nav = new dijit.layout.TabContainer({
style: 'width: 98%;',
doLayout: false
}, 'tc_nav');
var cp1 = new dijit.layout.ContentPane({
title: 'Test 1',
href: 'ajax?test1',
style: 'padding: 10px;',
selected: true
});
dojo.connect(cp1, 'onShow', function() {
cp1.refresh();
});
/*
* ...
*/
tc_nav.addChild(cp1);
/*
* ...
*/
tc_nav.startup();
});
Now I want to integrate a tab among the others which should be different in its behaviour: Instead of loading content into a ContentPane the tab should follow a simple link in the same window (like a Link), leaving the page containing the js/dojo app. I didn't find any satisfying solution yet, nor a dojo widget matching this requirement. What would be the best approach?
As an unpleasant workaround I created an overridden onShow event firing a window.location.href = '...';:
var cp2 = new dijit.layout.ContentPane({
title: 'Test 2',
style: 'padding: 10px;'
});
dojo.connect(cp2, 'onShow', function() {
window.location.href = 'http://www.google.com/';
});
An annoying disadvantage of this workaround is the fact the ContentPane is loaded first and afterwards the window.location.href is set, which leads to a quite peculiar lazy reload effect and consequently to a bad user experience. I would like to avoid this intermediate step.
ContentPanes are not actually iframes, so setting window.location.href would change the url of your entire page (dojo app) not just the ContentPane. Have you tried something like this:
cp2.set('href', 'http://www.google.com/')
A possible workaround to meet the above mentioned requirements is to override the onClick event of the ContentPane's controlButton:
/*
* ...
*/
var cp2 = new dijit.layout.ContentPane({
title: 'Test 2',
style: 'padding: 10px;'
});
/*
* ...
*/
tc_nav.addChild(cp2);
/*
* ...
*/
tc_nav.startup();
/*
* ...
*/
cp2.controlButton.onClick = function() {
window.location.href = 'http://www.google.com/';
};
Please note not to attach another function to the onClick event (e. g. by dojo.connect(cp2.controlButton, 'onClick', function() { /* ... */ });), but rather to override it, otherwise the ContentPane's content would be called up first.
Please note further the TabContainer's startup() function has to be invoked first to make the controlButton object accessible.