Here is my code :
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
layout: 'form',
style: 'width : 200px;margin-top: 10px ',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
id: 'name',
style: 'width : 100px;'
}]
}, {
xtype: 'container',
layout: 'form',
style: 'width : 200px;margin-top: 10px ',
items: [{
xtype: 'datefield',
fieldLabel: 'Date',
id: 'date'
}]
}, {
xtype: 'container',
layout: 'form',
style: 'width : 200px;margin-top: 10px ',
items: [{
xtype: 'textfield',
vtype: 'email',
fieldLabel: 'EmailId',
id: 'email'
}]
}, {
xtype: 'container',
layout: 'form',
style: 'margin-top: 10px ',
items: [{
xtype: 'button',
text: 'signup',
float: 'right',
handler: function() {
Ext.Ajax.request({
method: 'GET',
url: 'rest/helloworld/',
disableCaching: false,
success: function() {
Ext.Msg.alert('', 'success');
Window.Location.assign('abc.js');
},
failure: function() {
Ext.Msg.alert('', 'failed');
},
params: {
name: Ext.getCmp('name').getValue(),
email: Ext.getCmp('email').getValue(),
date: Ext.getCmp('date').getValue()
}
});
}
}]
}
]
});
});
Every thing is going great :
What I exactly need is to load another ExtJS page after success alert.
I tried Window.Location.assign('abc.js') but it is not working.
New to Extjs.
Please help
Here is my code :
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
items: [{
xtype: 'container',
layout: 'form',
style: 'width : 200px;margin-top: 10px ',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
id: 'name',
style: 'width : 100px;'
}]
}, {
xtype: 'container',
layout: 'form',
style: 'width : 200px;margin-top: 10px ',
items: [{
xtype: 'datefield',
fieldLabel: 'Date',
id: 'date'
}]
}, {
xtype: 'container',
layout: 'form',
style: 'width : 200px;margin-top: 10px ',
items: [{
xtype: 'textfield',
vtype: 'email',
fieldLabel: 'EmailId',
id: 'email'
}]
}, {
xtype: 'container',
layout: 'form',
style: 'margin-top: 10px ',
items: [{
xtype: 'button',
text: 'signup',
float: 'right',
handler: function() {
Ext.Ajax.request({
method: 'GET',
url: 'rest/helloworld/',
disableCaching: false,
success: function() {
Ext.Msg.alert('', 'success');
Window.Location.assign('abc.js');
},
failure: function() {
Ext.Msg.alert('', 'failed');
},
params: {
name: Ext.getCmp('name').getValue(),
email: Ext.getCmp('email').getValue(),
date: Ext.getCmp('date').getValue()
}
});
}
}]
}
]
});
});
Every thing is going great :
What I exactly need is to load another ExtJS page after success alert.
I tried Window.Location.assign('abc.js') but it is not working.
New to Extjs.
Please help
Share Improve this question edited Apr 11, 2018 at 19:02 Narendra Jadhav 10.3k15 gold badges34 silver badges44 bronze badges asked Apr 8, 2015 at 18:30 sparsh610sparsh610 1,6013 gold badges29 silver badges72 bronze badges 2- when you say a new Extjs page - you want to go to a different URL entirely, or you want to do something specific in Ext (like show a different panel). I doubt you really want to show the users the contents of abc.js, but maybe I'm wrong? – pherris Commented Apr 8, 2015 at 21:28
- yeah it just read the file on the browser , how ever i want to load ui as per the code in file. – sparsh610 Commented Apr 9, 2015 at 14:29
3 Answers
Reset to default 3Problem 1 (Not Ext-JS related): It's not Window.Location , it's window.location
Problem 2 (Ext-JS problem): Ext.Msg.alert dialog is asynchronous. The line location.assign('www.google.') will run immediately after the dialog is displayed, not after it is dismissed
To wait until after the button pressed, you have to pass it a callback.
Ext.Msg.alert('','success', function() {
// Note that window is not necessary here, just location.assign will do
window.location.assign('abc.js');
});
You can try:
window.location.assign("http://www.google.");
or just:
location.assign("http://www.google.");
or even:
location.href = "http://www.google.";
However if you pass the name of a .js file as an argument it will just make the browser read and display it. Perhaps you need a card layout and put another view on top in your ExtJS application?
If you have a card layout your link will be "#" + itemId of the item(card) you want to display.
This seems like a misunderstanding of how the browser will executes JS. You don't want to redirect the browser to the new JS, but rather load the new JS on the current page. This can be acplished by telling the browser to fetch the JS with a script tag:
var newJs = document.createElement('script');
newJs.type = "text/javascript";
newJs.src = 'abc.js';
document.body.appendChild(newJs);
More monly you would have already loaded abc.js on your page and would have a method you need to invoke on it, or transition to a Ext Panel or something like that. For example:
Ext.application({
name : 'Fiddle',
launch : function() {
//this panel might be the contents of abc.js
var abcPanel = Ext.create('Ext.panel.Panel', {
title : 'Results',
width : 600,
height : 400,
renderTo : Ext.getBody(),
hidden: true
});
Ext.create('Ext.panel.Panel', {
title : 'Results',
width : 600,
height : 400,
renderTo : Ext.getBody(),
items : [ {
xtype : 'container',
layout : 'form',
style : 'width : 200px;margin-top: 10px ',
items : [ {
xtype : 'textfield',
fieldLabel : 'Name',
id : 'name',
style : 'width : 100px;'
} ]
}, {
xtype : 'container',
layout : 'form',
style : 'width : 200px;margin-top: 10px ',
items : [ {
xtype : 'datefield',
fieldLabel : 'Date',
id : 'date'
} ]
}, {
xtype : 'container',
layout : 'form',
style : 'width : 200px;margin-top: 10px ',
items : [ {
xtype : 'textfield',
vtype : 'email',
fieldLabel : 'EmailId',
id : 'email'
} ]
}, {
xtype : 'container',
layout : 'form',
style : 'margin-top: 10px ',
items : [ {
xtype : 'button',
text : 'signup',
float : 'right',
handler : function() {
Ext.Ajax.request({
method : 'GET',
url : 'rest/helloworld/',
disableCaching : false,
success: function(){
abcPanel.show();
},
failure: function(){
Ext.Msg.alert('','failed');
},
params : {
name : Ext.getCmp('name').getValue(),
email : Ext.getCmp('email').getValue(),
date : Ext.getCmp('date').getValue()
}
});
}
} ]
}
]
});
}
});