I have a extJS window. I want to display some text or message which may be response of some server data. Can any body help me how to display ytext on ext JS window. What I need to edit in my code below.
var MyWin = Ext.create('Ext.window.Window', {
title: "My Window",
height: 200,
width: 400,
layout: 'fit',
});
MyWin.show();
Thanks for help.
Personally I preferred show server errors whit a simple window and html in it, like And-y shows you can set html of a window, you can do simply that using a function everywere like this:
var errorShow = function (text) {
Ext.create({
xtype: 'window',
title: 'Response error',
modal:true,
width: 200,
height: 200,
html:text,
scrollable: 'y'
}).show();
};
errorShow('<div style="text-align:center;"><h1>Server error</h1>'+
'<text style="color:red; font-size:1.4em;">404 not found</text><br/>'+
'<text style="color:blue;">www.error.com/img.jpg</text><br/>'+
'<text style="color:blue;">Error requiring image</text></div>');
here is a fiddle to show you.
Remember that you should use the same function during every error, setting dimentions on your need.
A modal window should be used, to ensure that it will be closed.
You can just use the html config to display plain text or html formated text in the Ext.window.Window and any other Ext.Component.
From the ExtJs 5.1.3 documentation html config:
An HTML fragment, or a Ext.dom.Helper specification to use as the
layout element content. The HTML content is added after the component
is rendered, so the document will not contain this HTML at the time
the render event is fired. This content is inserted into the body
before any configured contentEl is appended. Defaults to: ''
The working code looks like:
var MyWin = Ext.create('Ext.window.Window', {
title: "My Window",
height: 200,
width: 400,
layout: 'fit',
html: "with some plain text or <p> some html</p>"
});
MyWin.show();
Here is a working fiddle with the code above.
Related
I written some code for displaying user image.
I want to show user image after selecting/browsing it on local machine but it not shows after browse. below I placed some code for better understand.
this.userPhoto = new Ext.create('Ext.form.field.File', {
xtype: 'filefield',
padding: '5 5 5',
cls: 'p-photo-upload',
emptyText: 'Photo',
buttonOnly: true,
fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_PHOTO_'),
name: 'photo',
labelWidth: 200,
width: '26%',
msgTarget: 'under',
listeners: {
scope: this,
change: function (t, value) {
var img = '<img src="' + t.getValue() + '" />';
console.log('image', img, value, t.getRawValue());
//var img = '<img src="' + FLEET_SERVER_URL + 'images/users/DefaultUserIcon.jpg' + '" />';
this.userimage.setValue(img);
}
}
});
above code I use for browse user image. change event in listener set the image file path to Display field (Display field Code placed below)
this.userimage = new Ext.form.field.Display({
labelWidth: 200,
cls: 'p-uploaded-icon',
width: '28%',
height: 70,
labelAlign: 'right',
autoShow: true,
autoRender: true,
fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_ICON_'),
value: fleet.Language.get('_FLEET_USER_USERDETAIL_NOICON_')
//value: '<img src="' + FLEET_SERVER_URL + 'appRes/images/user.jpg' + '/>'
});
after selecting image its show path like this img src="C:\fakepath\boy.png" but image not shows
While #Tyr is right regarding the allowance of accessing files from Javascript due to security reasons, for your purpose (I understood it as displaying an image thumbnail before uploading it to the server) there is an option, and it's called plupload.
Since we emulate as much of HTML5 as possible, we are able (among other things) to provide access to raw file data, even in such environments that do not normally support it. One of the biggest benefits of this is that we can display the thumbnails instantly, right as you select the images in the dialog or drag&drop them from the desktop.
I myself have implemented this a while a go in a project. Here is a repository that I've found that you can look into to see how it is done. There are also some ExtJS integrations with plupload that you can get something useful from.
It's not possible to show files directly via javascript before upload due to security reasons.
I am using jquery-ui and it's dialog functionality to display modal dialogs in my web app. It works ok.
At one use case, I have a colorbox popup window on a screen, and once user finishes his input I need to display a confirmation dialog.
Also here everything actually works thanks to error handling on all the major browsers I tried, but I worry what problems might some combination of javascript engine&browser could cause.
The error I get is call stack size overflow (Chrome shows it as Uncaught RangeError: Maximum call stack size exceeded.).
The code for the modal dialog is:
function modalDialog(dialogText, dialogTitle, okFunc, okLabel, cancelFunc, cancelLabel) {
var dialogButtons = {};
dialogButtons[okLabel] = function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
};
dialogButtons[cancelLabel] = function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
};
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: dialogButtons
});
}
The colorbox is called in javascript, and it takes embedded div from the actual page as it's content:
$(function() {
$(".colorbox-load").colorbox({
inline: true,
overlayClose: false,
href: "#popupContents",
height: "320",
width: "300"
});
})
In the popup, I have a button which just opens up the confirmation dialog.
I apologize in advance as it's my first time using JSFiddle, and I wasn't able to get colorbox and dialog popup match exactly how it looks on my page (it actually pops up properly on top of the colorbox and not "in the background"). I'm not sure if this is because I had to use different versions of jquery and jquery-ui (I couldn't find same combination I am using from the pulldown) or something else.
A JSFiddle is here. If you click around the colorbox area once the "open dialog" button has been pressed you should get same error (firefox and Chrome seem to react slightly differently when to show the error).
Thank you for any suggestions!
It seems like the Dialog and Colorbox are fighting for the focus. Setting the trapFocus setting to false will resolve this issue. Of course it might have some side effects for your page depending on how you use it. Please consult the official documentation for details.
$(function() {
$(".colorbox-load").colorbox({
inline: true,
overlayClose: false,
href: "#popupContents",
height: "320",
width: "300",
trapFocus: false
});
})
I found plenty of stuff on StackOverflow and tried different things to achieve what i want, but i'm stuck on this here.
I have a Text in my HTML, if i click this text a fancybox should open with an Image Gallery, the images should come from the images Array.
What happens now is that it's opening a broken fancybox, without any styling, opacity, closebutton whatsoever. Here's a example of what it looks like!
My Javascript is the following
$(function(){
$("#turn_all_pictures").click(function(){
if(images.length == 0){
loadImages();
}
$(this).fancybox();
$.fancybox.open(
images,
{
'autoScale': true,
'autoDimensions': true,
'centerOnScroll': true,
helpers:{
overlay:{
css:{
'background' : 'rgba(58, 42, 45, 0.95)'
}
},
buttons:{}
}
});
});
})
An entry in the Array looks like this, which should be right according to this Stack Overflow Q/A
Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}
The needed HTML is this:
<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>
What am i doing wrong, what do i miss so that the fancybox will open correctly formatted and with the image Gallery instead of the Text from the HTML?
EDIT
I tried out to append the images in my loadImages() function to a div and then ref to this div with my fancybox.
$.fancybox.open(
images,
{
// 'autoScale': true,
// 'autoDimensions': true,
// 'centerOnScroll': true,
// helpers:{
// overlay:{
// css:{
// 'background' : 'rgba(58, 42, 45, 0.95)'
// }
// },
// buttons:{}
href: '#hidden_pictures'
}
)
That will show all pictures, the whole div, in a fancybox, so i'm guessing that it has something to do with the images array
Check the location of your resources such as your CSS and images for fancybox. You can also inspect your DOM using firebug or some DOM inspection tool to see if your resources are ring found.
I used firebug and looked at the NET tab which showed the http request to the resource. You may see a 404 error if it's not found.
Check you have passed images array in a format like this:
[
{
href: 'image1.jpg',
title: 'title 1'
},
{
href: 'image2.jpg',
title: 'title 2'
}
]
make sure you have included the css properly (check the path)
Also see this
I'm using Grails 1.3.7 and I use tinyMCE via richui. I'm trying to display a modal window which enables users to send a mail. However, if tinyMCE is correctly displayed, I can't use the text editor because of this error :
t.win.document is null
I finally found the reason here, at the end of the article :
http://blog.mirthlab.com/2008/11/13/dynamically-adding-and-removing-tinymce-instances-to-a-page/
It seems that when I call the page with the jquery script building the modal window, DOM isn't refreshed and doesn't create the corresponding textarea.
Anyway I don't know how to resolve this, so here is my code :
Jquery code :
function dialogSendFirstMail(id) {
var monurl = "/myApp/emailTemplate/writeFirstMail.gsp?id_for_mail="+id;
var titre = "Premier email"
//alert(monurl);
$("#dialogSendFirstMail").load(monurl, function() {
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
title:titre
});
});
}
GSP calling the script for the modal window :
<!-- ... -->
<g:if test="${params.sendFirstMail}" >
<div id="dialogSendFirstMail"></div>
<script>dialogSendFirstMail(${idProfil});</script>
</g:if>
</body>
modal window (only this for the moment) :
<richui:richTextEditor name="firstMail" value="%Email_de_bienvenue%"/>
In summary, if I detect that I have to send a first mail, the page creates a div in which is placed tinyMCE. This is what the user will see.
As you have mentioned, the reason that you the the error "t.win.document is null" is because the DOM isn't refreshed. So you will have to add the tinyMCE control explicitly when you load the modal dialog. You can use something like this in the gsp which renders the richUI editor (writeFirstMail.gsp in your case) :
jQuery(document).ready(function() {
//your tinyMCE settings here
tinyMCE.settings = {
mode : "textareas",
theme : "simple",
editor_selector : "mcesimple",
width: 400
};
tinyMCE.execCommand("mceAddControl", false, "yourTextareaId");
});
Once the dialog is closed, you can remove tinyMCE control from the textarea using this:
tinyMCE.execCommand("mceRemoveControl", false, "yourTextareaId");
I have a hidden div:
<div id="termSheetPrinted" style="visibility:hidden;">
</div>
that I am populating through the click of a button. After that population takes place, I would like to display the contents of this div on a separate popup window so the user can print it.
How would I do that with JQuery or Javascript or whatever is easiest.
slandau,
[edited] as per new information in your comment below.
using the jquery dialog (you must reference the jquery-ui js), create a 2nd div on the base html page and call it something like termSheetPrintedDialog.
<div id="termSheetPrintedDialog" style="visibility:hidden;"></div>
then in your document ready event, put:
$("#termSheetPrintedDialog").dialog({
autoOpen: false,
resizable: false,
height: 510,
width: 800,
position: 'center',
title: 'my snazzy popup window',
},
modal: true
});
then, in your button click event on your 1st modal form:
$('#yourbutton').click(function() {
// your div population code here ... etc
$('#termSheetPrintedDialog').html($('#termSheetPrinted').html());
$('#termSheetPrintedDialog').dialog('open');
});
it's not pretty, but it's an approach based on the constraints that you have.
You can use
var myWin = window.open('');
myWin.document.write(<html code>);
myWin.document.close();
Here is a link to read more about it:
window.open