I am creating model dialog using ExtJS. Below is the Code for it,
var win;
Ext.application({
name : 'Fiddle',
launch : function() {
var button = Ext.get('copy_button');
button.on('click', function(){
win = Ext.create('Ext.window.Window', {
title: 'Copy Existing',
height: 400,
width: 500,
layout: 'fit',
modal: true,
loader: {
url: '<%= request.getContextPath() %>/demo/copy.action',
autoLoad: true
}
});
win.show(this, function() {
button.dom.disabled = false;
});
});
}
});
The resulting page in the popup contain one button. On click of this button I want to call struts2 action means I want to change url of popup.
If I use window.location to call struts2 action then it changes url of parent window instead of pop up window. Can anyone please help me in this?
The window variable is an object reference to the current browser window. This would be useful in this situaton.
As you are using loader in the window component you should add code to get the loader and load a new resource location using its methods. Something like this should work.
button.on('click', function() {
var loader = win.getLoader();
loader.load('new-url')
});
References:
Loader - Load Method
getLoader method
Related
I'm learning extjs as our application uses it. Right now I've been able to build something like:
blur: function(field, lastValues) {
var vField = field.getValue(),
vFormPanel = field.formPanel;
if (Ext.isEmpty(vField)) {
MsgBox.show({
msgs: [{
type: 'info',
msg: Lang.getCustomFrameworkMessage('Do you want to search google?')
}],
buttons: MsgBox.YESNO,
fn: function(buttonId) {
if (buttonId === "yes") {
var redirect = 'https://google.com'
window.location.href = redirect;
}
}
}
}
}
}
In the above code, when the field is tabbed in and out and is empty, it shows the message box. Instead I want that when the page is loaded, very then the message box should be displayed. How can that be done??
You already used blur event to do your thing. You can use afterrender event to display your message.
It will depend on what are you having in your app/UI but the general idea is just look # the documentation for the event you want to tie in and then add your handler there.
Here is an example app:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert('TEST')
}
}
});
}
});
Here is a demo in Sencha Fiddle
Note: Demo and example is in Sencha ExtJS 5.1
I have a panel with around 10 items. For all those items I have implemented "after render" event handler in respective controllers of each item.
This is how I have registered afterrender events in Controller's init method:
init: function() {
this.control({
'#myFirstPanel': {
afterrender: this.afterrender
}
});
}
My panel code is like:
Ext.define('App.view.popUpWindow', {
extend: 'Ext.panel.Panel',
initComponent: function(){
this.callParent();
},
id: 'popup',
layout: 'fit',
items: [
{
xtype: 'panel'
items: [
{
// One of my custom component
xtype:'FirstGrid'
}....//10 items in total
]
}]
});
When I get hasListeners property of my panel's object after my app loads by following code
Ext.getCmp('popup').hasListeners
It returns me this object
{afterrender: 10, tabchange: 1}
Now when I destroy my panel by this command
Ext.getCmp('popup').destroy()
and open my app again(my app is a sub Extjs app of a another Extjs app)
Ext.getCmp('popup').hasListeners
It returns me this object
{afterrender: 20, tabchange: 2}
My question is that why even after call to destroy(), hasListeners is some how keeping record of old Listeners? I know this object doesn't show the number of listener (I read api) but what is going here then?
Can someone explain this to me? As I have to manually remove old listeners(my other question about this), why not .destroy() is automatically destroying all references?
Thank you.
I have created an 'Ext.Img' with Ext.create and assigned a remote url to the src attribute. Now i want to know the width and height of the image from the remote location.
i have gone through all the events for Ext.Img but didnt got which is the correct event to register. Did any body have any idea to find out the width and height of the image.
Thanks
Tapaswini
Try this:
Ext.onReady(function() {
Ext.create('Ext.Img', {
src: 'http://www.davey.com/elements/skin/home_tree.png',
/*style: 'visibility: hidden;',*/
listeners: {
render: function() {
this.mon(this.getEl(), 'load', function(e) {
console.log(this.getWidth());
console.log(this.getHeight());
});
}
},
renderTo: Ext.getBody()
});
});
Notice that image component must be rendered, and should also be displayed. Otherwise you will get 0x0 dimensions. You can use visibility:hidden to hide it.
Working sample: http://jsfiddle.net/U769Y/ (see console)
I have a grid, the rows of which can be clicked on. The click fires an event that is then captured by the controller. Is there a way for that controller to open a popup and call a controller to populate that popup with its associated view? This is what I have in my grid's controller now:
init: function() {
...
this.control({
'shipmentsgrid': {
itemrowclick: this.itemRowClick
}
})
},
itemRowClick: function() {
var win = new Ext.Window({var win = new Ext.Window({
items: [{
xtype: 'shipmentmonthly' // This is not recognized
}]
}).show();
}
I am not quite sure what you trying to archive. But you can easily fetch a instance of another controller using getController('YourControllerName') called from any controller scope. That will present you with a instance of this controller (and even load necessary classes). Now you are free to call any method on this controller with any arguments. For example you may also either provide the instance of this controller as argument and us that one as scope with or use this (But that depends on your implementation)
For your example:
itemRowClick: function() {
var ctrl = this.getController('Controller2');
var win = ctrl.openWin();
win.show();
}
// resident in controller 2
openWin: function() {
var win = Ext.create('Ext.window.Window',{
items: [{
xtype: 'shipmentmonthly' // This is not recognized
}]
});
return win;
}
I have a Grid Panel with a toolbar and an context menu.
The toolbar has a edit button and the context menu has a edit menu item.
Both shares the same properties (text, icon and handler)
Ext has something called Action which makes it possible to share functionality etc. between components, but til now I have had no success getting it to work in the MVC architecture
(I am using the new MVC architecture in 4.0)
My Action class looks like this:
Ext.define( 'App.action.EditAction', {
extend: 'Ext.Action',
text: 'Edit',
handler: function()
{
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'icon-edit-user' ,
});
And in my context menu
requires: ['App.action.EditAction'],
initComponent: function()
{
var editUser = new App.action.EditAction();
this.items = [
editUser,
{
// More menuitems
}
...
];
this.callParent(arguments);
When running the code I get "config is undefined" in the console.
Can anyone point out what I am doing wrong?
Thanks in advance,
t
Passing an empty config to your constructor will avoid the error, but have unwanted consequences later because, unfortunately, the base class (Ext.Action) relies on this.initialConfig later on. For example, if you called editUser.getText() it would return undefined instead of the expected 'Edit'.
Another approach is to override your constructor to allow a no-arg invocation and apply your overridden configuration:
Ext.define( 'App.action.EditAction', {
extend: 'Ext.Action',
text: 'Edit',
constructor: function(config)
{
config = Ext.applyIf(config || {}, this);
this.callParent([config]);
},
handler: function()
{
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'icon-edit-user' ,
});
As per Ext.Action constructor
constructor : function(config){
this.initialConfig = config;
this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
this.items = [];
}
You must supply config not to get config is undefined exception in the second line (precisely in config.itemId part).
Updating your code as var editUser = new App.action.EditAction({}); should help(passing new empty object as config).
Surely, you could add some properties to the config object too.