PDA

View Full Version : How to display a window popup in MVC



marxan
14 Sep 2012, 1:32 AM
Hello,

I have defined the following window as a View and I would like to display it when I click on a button of my page.


Ext.define('TAB.view.ExcelOptions', { extend: 'Ext.Window',
alias: 'widget.exceloptions',
layout: 'fit',
width: 500,
height: 300,
items: [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name'},
{
xtype: 'textfield',
fieldLabel: 'Age'}
]}
],
buttons: [{
text: 'Submit',
disabled: true},
{
text: 'Close',
handler: function() {
this.hide();
}}]
});

so my controller I try the following to display it but even the component is defined it doesn't display my window.



Ext.getCmp('options').show;


Maybe it's the right way to do that so if anyone could help it would greatly appreciated.

Cheers

remeez.persent
14 Sep 2012, 1:59 AM
Hi marxan,

Try going through this example, it helped me understand ExtJS MVC.

http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture

marxan
14 Sep 2012, 4:35 AM
Here's the solution.

var view = Ext.widget('exceloptions');
view.show();



Hello,

I have defined the following window as a View and I would like to display it when I click on a button of my page.


Ext.define('TAB.view.ExcelOptions', { extend: 'Ext.Window',
alias: 'widget.exceloptions',
layout: 'fit',
width: 500,
height: 300,
items: [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name'},
{
xtype: 'textfield',
fieldLabel: 'Age'}
]}
],
buttons: [{
text: 'Submit',
disabled: true},
{
text: 'Close',
handler: function() {
this.hide();
}}]
});

so my controller I try the following to display it but even the component is defined it doesn't display my window.



Ext.getCmp('options').show;


Maybe it's the right way to do that so if anyone could help it would greatly appreciated.

Cheers

lukasz.sudol
14 Sep 2012, 5:19 AM
Hi,

first, you should require file in your controller:
requires: ['TAB.view.ExcelOptions']

next step, in your button handler:
var view = Ext.create('TAB.view.ExcelOptions');
view.show();
or
Ext.create('TAB.view.ExcelOptions').show();

You can also pass some arguments to view using:
var view = Ext.create('TAB.view.ExcelOptions',{title: 'some title'});

scgrif32
20 Dec 2012, 9:49 AM
Hello,

The method you provided as a solution is what I used and it worked great. Especially when I needed to update the grid that spawned the new window (modal in my case) with the updated record that was submitted from the form in the modal window.

What I am needing help with is how do you do the same if you have an entirely new browser window open instead of an Ext.window.Window object? I needed to display the location area and was not aware if such could be done using the Ext.window.Window class?

Any help with this issue would be greatly appreciated.

Thank You,

Shawn