We Keep Coding

How to display plain text in ExtJs

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.

How do I dynamically adding a collapsible div element on a web form

I have a html file whose skeleton is as follows:
<div id ="QBForm">
<h3>Query1</h3>
<div class ="QBSubForm">...</div>
</div>
I have a "AddQuery" button and on clicking that, I want to add another subform to the existing form and here's how I do that:
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
});
And I have this in my jQuery Ready() function:
$("#QBForm").accordion();
But every time, I click on my add query button, the subform is added but it is not collapsible, its just its own static thing.
How do I add a sub-form and make each sub-form collapsible?

You should try passing accordion with active: false and collapsible: true.
I haven't really tested the code below, but try:
$("#QBForm").accordion({ active: false, collapsible: true });
if you do not set collapsible to true, jQuery UI will set at least one section open.

Use refresh method of accordion to include dynamically added content.
Then if you want the new section opened you could also set the last panel to active by using -1 as index
$("#AddQuery").click(function (event) {
var querysubform = $(".QBSubForm").html();
$("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");
/* only refresh*/
$("#QBForm").accordion('refresh');
/* refresh and set new panel active */
$("#QBForm").accordion('refresh').accordion( "option", "active", -1 );;
});
Accordion Refresh docs()

How to open two modal dialogs in Twitter Bootstrap at the same time

I have implemented bootstrap dialog in my project. I have some delete functionality in that dialog, and the delete confirmation message opens another bootstrap dialog. But when the second confirmation dialog is open, the first dialog is not disabled and all the events work.
Is there any solution to disable the original dialog when another dialog opens?
Here's my code:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
content: content,
buttons: [{
label: 'Save',
cssClass: 'btn-primary',
id: 'btnSave',
onclick: function (dialog) {
}
},
{
label: 'Close',
cssClass: 'btn',
id: 'btnClose',
onclick: function (dialog) {
if (callback != "") {
callback(true);
}
dialog.close();
}
}]
});
dlg.open();`
}
Screenshot:
When the dialog for delete confirmation is open, I want to disable the first dialog.

The Problem:
In order to understand the intricacies of modal dialogs in web development, you'll need to understand a bit more about the z-index property and stacking contexts.
In short, the dialog works by adding two principal components to the DOM: a background that takes up the entire screen, and a div comprising your dialog. Each of those stand out from the rest of the page because they are put at the the root level of the DOM and given a high value for their z-index property. How high? Well, try adding a blank modal to a blank page and you'll see the following DOM elements:
<div class="modal-backdrop fade in"></div> <!-- z-index: 1030; -->
<div class="modal bootstrap-dialog"> <!-- z-index: 1040; -->
<div class="modal-dialog"> <!-- z-index: 1050; -->
The modal-backdrop gives the illusion of a true modal process because it renders above all the other content which prevents clicks from firing anywhere below. The only reason the modal-dialog is allowed to receive clicks is because it is stacked on top of the background, by providing a higher z-index.
That's it! That's the whole bag of tricks. So when bootstrap cautions against use multiple dialogs, they're doing so because stacking becomes tricky. If you add another element, it gets rendered with the same exact z-index, meaning that it will be above the regular page content, but on the same plane as the original dialog. If it doesn't completely cover the original, then the original will still be clickable because there is no backdrop above it.
The Solution:
In order to resolve this, you need to come up with your own way of disabling clicks on background modals. This issue appears to have been (partially) resolved. See the following example:
Demo in jsFiddle
Bootstrap Dialog made it so that clicking off of a dialog simply closes the last dialog in the DOM and marks the event as handled so it won't fire anything else. If the second modal is up and you click off of it, the only thing that will happen is the second modal will close.
More Advanced Handling:
If you want the second modal to look like it's over the first one, you'll have to do that manually.
When the new modal is created, it comes with it's own modal-backdrop. When the second modal is shown, you can have it appear above the original by incrementing its z-index relative to the first modal. In the onshown event, we just have to grab the current modal and it's overlay and modify the z-index using the .CSS method. We want this to appear above any existing modals, so first we'll count the number of modals in the DOM ($('.bootstrap-dialog').length) and then increment the z-index so it's higher than the next highest dialog.
Call like this:
function OpenDialogForSelectionAdmItem(title, content, callback) {
var dlg = new BootstrapDialog({
title: title,
message: content,
onshown: function(dialog) {
var tier = $('.bootstrap-dialog').length - 1;
dialog.$modal.prev(".modal-backdrop")
.css("z-index", 1030 + tier * 30);
dialog.$modal
.css("z-index", 1040 + tier * 30);
}
// More Settings
}).open();
}
Working Demo in jsFiddle
Screenshot:
As a proof of concept, here's a Demo that allows you to continually add dialogs on top of other dialogs
Infinite Dialogs Fiddle
UX Caution:
While this is technically possible to achieve, modals within modals can create a confusing UX, so the right answer if you have the problem might be to try to avoid it altogether by taking the original workflow and promoting it to a full page design with a url and state.

First add class to primary modal so:<div class="modal-content kk">
I simply use:
$('#myModal1').on('shown.bs.modal', function () {
$('.kk').addClass('magla');
$('#myModal').modal('hide');
});
$('#myModal1').on('hidden.bs.modal', function () {
$('.kk').removeClass('magla');
$('#myModal').modal('show');
});
where .magla css is:
.magla {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
Try looks good for me.

Just hide the actual modal using the onclick method
<button data-toggle="modal" data-target="#modal-to-show-id" onclick="$('#actual-modal-id').modal('hide');">
Text Button
</button>

My humble solution: Generate a new ID for each new modal. Then just manage everything through one variable.
It's working for my purposes, btw.
var _MODAL_LAST;
$( document ).on( 'show.bs.modal' , '.modal' , function(){
_MODAL_LAST = $(this);
});
$( document ).on( 'hide.bs.modal' , '.modal' , function(){
if( _MODAL_LAST.attr('id') !== $(this).attr('id') ){
return false;
}else{
_MODAL_LAST = $(this).prevAll('.modal:first');
}
});

Using tinyMCE into modal window

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");

Jquery dialog to open multiple windows

I'm trying to make system of multiple dialogs in one page using jquery dialog...
Functions looks like...
function open_w(id){
$('.opened').dialog('close');
$(id).addClass('opened');
$(id).dialog({position: 'center', modal:true, width: '750px' });
};
function close_w(){
$('.opened').dialog('close');
$('.opened').removeClass('opened');
};
As you see passing the ID opens me that windows, but before open close me old windows.. When i open it fist time everything is good.. But Next time it's doesn't want open
Where is mistake?

It's because you're trying to re-create the dialog, instead of this every time:
$(id).dialog({position: 'center', modal:true, width: '750px' });
You need to call open (on the already created dialog), like this:
$(id).dialog('open');
For example:
function open_w(id){
close_w();
$(id).addClass('opened')
.dialog({position: 'center', modal:true, width: '750px' })
.dialog('open');
}
function close_w() {
$('.opened').dialog('close').removeClass('opened');
}