I am running a html file in which when I click the submit button a new html file should open.
This is the code:
code running in loginForm.html
{
xtype : 'button',
text : ' Login ',
formBind : true,
listeners : {
click :function(){
alert();
//these methods are not working
//Ext.getCmp('login_panel').load({url : '/smartNav/pub/html/index_dev.html', scripts : true});
//Ext.getCmp('login_panel').update('index_dev.html');
}
}
}
Can someone suggest me how this can be done?
You can open new window just using window.open
window.open('/smartNav/pub/html/index_dev.html');
or change location in current window
window.location.href='/smartNav/pub/html/index_dev.html';
Related
I can only create new javascript, I don't have access to source code. A button & on click of that a popup is already there.
Now I want to write ext.js script to add text(HTML) on popup form.
I want text like below:
Below is the code I added in the console and I got the result as expected.
getComponent('addStakeholderUserBtn').on('click', function() {
var addlabel = getComponent('stakeholderAddUserWindow');
var labeltext = Ext.create('Ext.Panel', {
html: "Before adding a new user,'Add Existing Stakeholder'",
bodyPadding: 10
});
addlabel.insert(1,labeltext);
)};
I am creating new ExtJs tabpanels and rendering panels inside it programmatically.
The panels (rendered inside tabs) are all written in separate JS files.
Opening, rendering and closing of the tabs is working completely fine.
But when I debug the code I see that the previous components of the closed tabs are still active in the memory. As a result of which the functioning of the components gets affected when the tab is reopened.
I want to destroy all the components inside the tab panels (if ExtJs, for some reasons, is not able to do it).
How can I do this?
Below is a sample code which I am trying:
Main Tab:
var tabs = new Ext.TabPanel({
id : 'screensTabPanel',
layout : 'fit',
enableTabScroll : true,
height : Ext.getBody().getStyleSize().height - 60,
activeTab : 0,
//enableTabScroll : true,
autoScroll : true,
autoRender : true,
border : false,
plugins : [ {
ptype : 'tabscrollermenu',
maxText : 30,
pageSize : 5
} ]
});
Dynamic Tab object:
var tabConfig = {
title : text,
bodyPadding : 3,
closeAction:'destroy',
autoScroll : true,
id : 'tab' + id,
closable : closable,
loader : {
loadMask : 'loading...',
autoLoad : true,
url : url,
scripts : true,
params : {
userId : 1
},
border : false,
appId : appIdx,
screenId : screenId,
gridType : gridType,
listeners : {
beforeclose : function(tab) {
debugger;
tab.removeAll(); //I tried doing this
tab.destroy(); //I tried doing this as well
return true;
}
}
};
Internal Panel code:
Ext.define('Ext.ux.window.VisualSQLQueryBuilder', {
extend: 'Ext.panel.Panel',
itemId: 'qb-VisualSQLQueryBuilderId',
renderTo: Ext.Element.get('divQueryBuilder'),
layout: {
type: 'border'
},
listeners:{
beforerender: function(thisa, eOpts ){
debugger;
/*if(Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length > 1){
Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[0].destroy();
}*/
Tab.MainTab = Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId")[Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId").length - 1];
}
},
items: [ .... screen components ... ]
});
Add Panel object to tab:
addedTab = ExtCont.add(tabConfig);
addedTab.show();
ExtCont.setActiveTab(addedTab);
Now this is what happens:
Open Tab (Name - Query Builder)
Code reaches the beforerender listener.
Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has only one object inside it.
Everything works fine.
Now the problem starts
Close the tab
Code reaches beforeclose listener. Trying tab.removeAll() and tab.destroy()
Reopen tab - Query Builder
Code reaches beforerender listener.
Now Ext.ComponentQuery.query("#qb-VisualSQLQueryBuilderId") has two objects inside it. So it is retaining the object of the tab opened first time. And the second one is that of the tab opened just now.
How do I ensure whenever a tab is closed all its components get smoothly destroyed?
from TabPanel:
Note: By default, a tab's close tool destroys the child tab Component and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable re-use of a tab, configure the TabPanel with autoDestroy: false.
so it could really be an ExtJS Bug cause autoDestroy: true is default. maybe you could open a ticket.
I am getting the error: "Uncaught TypeError: Cannot read property 'addCls' of null" in the following scenario.
I have a requirement of two modal windows. The first modal window has a Grid. When I double click on the Grid in the first modal window, I should open a second modal window. Below is the code I used:
saleOrderEmployeeGrid.on('celldblclick', function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts){
loadActivityWindow();
});
}
function loadActivityWindow()
{
jobSlotActivityWin = new Ext.Window({
id :'jobSlotActivityWinId',
modal : true,
layout : 'fit',
width : 900,
height : 500,
closeAction :'destroy',
plain : true,
model : true,
stateful : false,
title :'Create Job Slot',
items : [soActivityPanel],
buttons : [{
text : 'Close',
handler : function(){
jobSlotActivityWin.destroy();
}
}
]
});
jobSlotActivityWin.show();
Ext.WindowManager.register (createJobSlotWin); // createJobSlotWin is the first modal window
Ext.WindowManager.register(jobSlotActivityWin); // jobSlotActivityWin is the second modal window created above
Ext.WindowManager.bringToFront ('jobSlotActivityWinId');
}
So, when I double click on the saleOrderEmployeeGrid, I see the second modal window fine. Then I close the second modal window and double click on the grid again on the first modal window.
This now doesn't bring up the second modal window. It completely goes masked and blank in the background of first modal window and I see the below error in the JavaScript Console:
Uncaught TypeError: Cannot read property 'addCls' of null
To be more precise, the error seems to be coming out of jobSlotActivityWin.show() as my debug logs failed at that point.
Anyone faced this before and can help me?
Set the closeAction to hide, not sure why the default is destroy but what it essentially means is that when the window is closed the element will be removed from the dom and show will not work anymore.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-closeAction
reply to comments:
conditional create example
//the window is only created once, the data is always show and updated.
if(!this.win) {
this.win = createWindow();
}
updateWindowData();
this.win.show();
Instead of saying closeAction:'hide' everywhere, we have something like this in our source
Ext.override(Ext.Window, {
closeAction: 'hide'
})
If you put that snippet before any windows are created all of them will be closeAction hide by default.
set
closeAction:'hide',
onEsc: funtion() {
jobSlotActivityWin.hide()
}
My problem is: I need to support select local image files and also preview server side images, I am using an plugin FileUploadField. It has a
button for select from local files, how to add another button near it ?
perhaps this is the same question :
How to find a buttons's parent component, and append another child (button)?
thanks a lot.
you can add your custom button after field is rendered like this
Ext.onReady(function(){
var fp = new Ext.ux.form.FileUploadField({
renderTo : Ext.getBody(),
emptyText: 'Select an image',
listeners : {
afterrender : function(fupload) {
this.customButton = new Ext.Button({
renderTo : Ext.getBody(),
cls: 'x-form-file-btn',
text : 'some button'
});
this.customButton.el.insertAfter(fupload.fileInput);
}
}
});
});
Example:
JSFiddle Link
I am new to ExtJS.
This is my window definition :
this.dialog = new Ext.Window({
title : "About us",
layout : 'anchor',
modal : true,
autoEl : {
tag : "iframe",
id: "myframe",
src : "../editor/actorseditor.html",
height: 500,
width : 600
} });
this.dialog.show();
I want to close my dialog window from "actorseditor.html".
How to achieve this. Also the opened window is not having close button.
Thanks in advance
This will only work if the html page in your iFrame is from the same application as your parent page. Or at least the protocol, subdomain, domain and port are all the same.
You will need to expose a global function in your parent page that will be called by the JavaScript running in the child page (iframe).
In your child page you call:
if (window.parent && window.parent.myGlobalFunction) {
window.parent.myGlobalFunction('hello!');
}
In your parent page you include the following global function (name it as you wish of course):
function myGlobalFunction(input){
console.log('message received:'+input);
MyApp.app.fireEvent('closeMyWindow',input);
}
This assumes that you are using MVC and you created property 'app' and set it to 'this' in the application launch function. And that you have a controller that is listening for aplication wide event like this:
Ext.define('MyApp.controller.Qnum', {
extend:'Ext.app.Controller',
init:function(){
this.control({
...
});
//listen for app wide event fired by : MyApp.app.fireEvent('closeMyWindow',input);
this.application.on({
closeMyWindow: this.closeWindowItsDrafty,
scope: this
});
},
closeWindowItsDrafty:function(){
//get reference to my window
//call myWindow.close();
}
I'll assume that in actorseditor.html, you must have a button
In this button you can set this listener:
listeners : {
click : function () {
Ext.getCmp('yourdialogid').close();
}
}
You also need to put an id to your dialog box.
Please try following inside your close button listener:
var parentDialogWindow = window.parent.Ext.cmp('ID_OF_DIALOG_WINDOW');
parentDialogWindow[parentDialogWindow.closeAction]();