on click of button i am opening one popup with abort button. and sending request to server after i get response i open new popup window with download button and close the first one. at first time it is working fine. but second time my abort and download button getting disappeared. when i inspect popup i can see abort n download button present at code side but not visible on user interface.
if (_data.status == "inProcess" ) {
exportPopup.show();
} else if (_data.status == "success") {
var height= exportPopup.getHeight();
exportPopup.close();
downloadPopup = Ext.create('Ext.window.Window', {
name: 'downloadReport',
header: false,
id: 'downloadPopWin',
constrain: true,
closable: false,
width: 400,
height: height,
resizable: false,
bodyStyle: 'background-color : white;',
buttonAlign: 'center',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items:
{
xtype: 'label',
itemId:'exportStatus',
margin : '50 0 0 0',
text: 'Export completed.',
//style: 'font-weight: bold;'
},
buttons:[
{
//xtype: 'button',
text: 'Download',
id: "btnDownloadReport",
//margin : '20 0 20 180',
handler: function(_button) {
downloadPopup.close();
ReportUtil.downloadReportData(me, _data);
}
}
]
});
downloadPopup.show();
}
remove closable: false, and try closable false means we cannot close the window
docs:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window-cfg-closable
Related
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
I'm building an application with Sencha Touch 2.x. It consists of several screens that may overlap each other.
On app startup I'm loading all screens by adding them as items in my main view (part of the viewport). All of them except the start screen are hidden: true, which is working perfectly fine. I've created a new view and tried adding it the same way I did with the others (it is in fact a copy of another one, just changed names), but on app startup I get:
TypeError: 'undefined' is not an object (evaluating 'firingFn.apply')
When I remove the hidden: true attribute, the view is shown and the app loads. When I create the view with Ext.create(namespace.view.name) it is working fine.
The others views (which are more or less exactly the same) are working!
I've given a unique xtype, specified the path on Ext.define, added the view to app.js.
As I'm able to show it without "hidden: true" the problem shouldn't lie somewhere in there.
Does anybody know about this behavior?
(I know that it is recommended to create and destroy the views once they are needed, but at the moment we're going a different approach. So I'm interested what caused this behavior.)
Here's my Main view:
Ext.define('namespace.view.Main', {
extend: 'Ext.Container',
xtype: 'Main',
config: {
layout: 'hbox',
items: [
//actual necessary screens
{
xtype: 'Start',
showAnimation: {type:'fade', duration: 200, easing: 'easeInOut'}
},
//Preloading all Screens on startup
{
xtype: 'SearchOertlichkeit',
hidden: true
//this is the one causing trouble !
},
{
xtype: 'MeldungNeu',
hidden: true,
showAnimation: {type:'fade', duration: 200, easing: 'easeInOut'}
},
{
xtype: 'MeldungenBearbeiten',
hidden: true,
showAnimation: {type:'fade', duration: 200, easing: 'easeInOut'}
},
{
xtype: 'SearchLocation',
hidden: true
},
{
xtype: 'SearchMieteinheit',
hidden: true
},
{
xtype: 'Menu',
hidden: true
}
]
} //endconfig
});
Here's a part of the view I try to show:
Ext.define('namespace.view.SearchOertlichkeit', {
extend: 'Ext.Container',
xtype: 'SearchOertlichkeit',
config: {
height: '100%',
width: window.innerWidth-300,
padding: 10,
modal: true,
hideOnMaskTap: true,
top: 0,
right: 0,
bottom: 0,
left: 'auto',
enter:'right',
exit: 'right',
showAnimation: {
type: 'slideIn',
direction: 'left',
easing: 'easeInOut'
},
hideAnimation: {
type: 'slideOut',
direction: 'right',
easing: 'easeInOut'
},
items: [
{
//here are some items
},
],
listeners: {
initialize: function(comp , eOpts){
this.element.on('swipe',
function(event, node, options, eOpts) {
namespace.app.getController('Main').onSwipe(event.direction, 'searchOertlichkeit');
}, comp
); //endonswipe
} //endinitialize
} //endlisteners
}, });
I couldn't find any errors with the syntax (using Aptana, doesn't show me any errors too) but when I build for production (sencha cmd is running successful) I get an error once I try to run the prod-app:
Error evaluating http://127.0.0.1:8020/path/production/app.js with message: SyntaxError: Expected token '}'
Check the last line in your main view, the brackets are commented:
} //endconfig });
should be like:
} //endconfig
});
I have a quite a complicated layout for my application, using borders, vbox's and hbox's which all seem to fit quite well except for one annoyance. The bottom of the grid in the southern region is not behaving. I want the grid to take up the height of the panel when the browser is above minHeight/maximized but at the moment it look like this:
And when the browser is shrunk (but not below min size) it looks like this and I am unable to get to the bottom of the grid scrollbar :(
You can see the scrollbar cut of (probable min height on the viewport/grid issue) but not sure how to fix this can someone spot what I need to do resolve these two issues? Code below:
<script type="text/javascript" src="../app.js"></script>
<!-- script to warn users when leaving page -->
<?php
$db = Zend_Registry::get('db');
$result = $db->query("select ERROR_ID, ERROR_DESCRIPTION, EMAIL_CONTENT, to_char(\"TIMESTAMP\", 'MM/DD/YYYY HH24:MI:SS') as TIMESTAMP, READ from PI_EMAIL_ERROR where \"TIMESTAMP\" = ( select max(\"TIMESTAMP\") from PI_EMAIL_ERROR ) and READ = 0 and rownum = 1")->FetchAll();
?>
<script type="text/javascript">
var container = Ext.create('Ext.container.Viewport',{
id: 'mainWindow',
minWidth: 800,
minHeight: 640,
layout:'fit',
listeners: {
afterrender: function() {
this.setSize(this.getWidth(), this.getHeight());
},
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
},
defaults: {
//collapsible: true, //Add this to true later maybe impliment a lock sam
//when viewport scrolled up, background shows a login.
split: true,
rezisable: false
},
items:[{
layout: 'border',
//height: 640,
//minHeight: 640,
items: [
{
//This panel holds the file menu strip and the show combo
border: false,
region: 'north',
height: 92,
bodyStyle:'background: #DFE8F6;',
/******Toolbar*******/
tbar: [
/****File Button****/
{
xtype: 'button',
text: window.samlanguage.file,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.refreshlist,
action: 'refreshGrid',
icon: '../assets/images/refresh.png',
handler: function(btn){
}
},{
text: window.samlanguage.settings,
icon: '../assets/images/settings.png',
action: 'spawnSettings',
handler: function(Btn){
}
},{
text: window.samlanguage.compose,
icon: '../assets/images/mail--plus.png',
action: 'spawnEmail',
handler: function(Btn){
Ext.create('APP.view.core.forms.Emailform').show();
}
},{
text: window.samlanguage.logout,
action: 'logout',
icon: '../assets/images/exit.png',
handler: function(){
}
}
]
},
/****Help Button****/
{
xtype: 'button',
text: window.samlanguage.help,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.contents,
icon: '../assets/images/contents.png',
action: 'spawnContents',
handler: function(btn){
}
},{
text: window.samlanguage.license,
icon: '../assets/images/licence.png',
handler: function(btn){
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"<b>Retrieving</b> licensing information..."});
myMask.show();
Ext.Ajax.request({
url: '../License/read',
method: 'post',
//params: values,
success: function(response){
myMask.hide();
var numusers = Ext.decode(response.responseText);
Ext.create('APP.view.core.forms.License', {numusers: numusers.numusers}).show();
}
});
}
},{
text: window.samlanguage.about,
icon: '../assets/images/about.png',
//action: 'spawnAbout',
handler: function(btn){
Ext.Msg.show({
title:'About us',
buttons: Ext.Msg.OK,
icon: 'perceptiveLogo'
});
}
}
]
}
],
items: [{
//Comboform with userlist
xtype: 'Comboform',
bodyStyle:'background: #DFE8F6;',
border: false
}]
}//End north region (header) region
,{
region:'center',
type: 'vbox',
align : 'stretch',
items: [
{
//Add the userlist grid
title: 'Currently showing all users',
//id: 'usergridList',
height: 290,
minHeight: 290,
border: false,
xtype: 'Allusers'
},
{
//Add the allprograms grid
title: 'Program Access Permissions',
border: false,
height: 380,
minHeight: 380,
//height: 'auto',
xtype: 'Allprograms'
}
]
} //End center (body) region
,{
region:'east',
type: 'vbox',
align : 'stretch',
split: true,
//collapsible: true,
width: 240,
minWidth: 240,
maxWidth: 240,
//title: 'User Actions',
listeners: {
/*collapse: function() {
this.setTitle("User management");
},
expand: function() {
this.setTitle("User Actions");
},
click: function() {
return false;
},*/
afterrender: function(){
this.splitter.disable();
}
},
//height: 300
items :[
{
title: 'User Actions',
border: false,
height: 168,
xtype: 'Useractionsform'
},
{
title: 'View Audit',
border: false,
height: 122,
xtype: 'Auditform'
},
{
title: 'Program Access',
border: false,
height: 380,
minHeight: 340,
xtype: 'Programactionsform'
}
]
} //End of east region
,{
region: 'south',
height: 20,
bodyStyle:'background: #DFE8F6;',
border: false
}
]
}]
}).show();
});
</script>
Syntax highlighted link:
http://paste.laravel.com/kPr
Thank you kindly
Nathan
I'm referring to lines 87-97 of the syntax highlighted link you posted.
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
This is the resize handler for the viewport, so every time the browser is resized, this funciton will explicitly set the grid height. Not sure what the purpose of this code is but it looks like it could be the issue. Generally you shouldn't need code like this - everything should fit together if you have the layouts set up right, and then you can use minHeight/maxHeight for the grid if you want. What happens if you just take this code out?
I think you need to remove the resize event handler completely. It looks like you're trying to create a 'vbox' layout on your center panel, but you're using 'type: vbox'. Try using this:
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
}
This was taken from the ExtJS examples (http://docs.sencha.com/ext-js/4-2/extjs-build/examples/layout-browser/layout-browser.html). Then you can just add a 'flex' to your child containers instead of a minheight.
I have this code which creates a floating panel centered to the screen:
Ext.define('myapp.view.ButtonNav', {
extend: 'Ext.Container',
xtype: 'myapp_buttonnav',
config: {
fullscreen: false,
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Button 1',
listeners: {
tap: function () {
var panel = Ext.Viewport.add({
xtype: 'panel',
defaultType: 'button',
baseCls: 'btn1_cont',
centered: true,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
baseCls: 'btn1',
text: 'HOME PAGE',
handler: function() {
Ext.Viewport.setActiveItem({
xtype: 'myapp_homepage'
});
panel.destroy();
}
}
],
top: // SET TOP TO SOURCE BUTTON
left: // SET LEFT TO SOURCE BUTTON
});
}
}
},
]
}
});
As you can see, it is a container, with a button which when clicked shows a floating panel.
How do i position the floating panel centered to the button that triggered the floating panel?
If I understand correctly, you need to use the showBy function like so :
myPanel.showBy(myButton);
It will show the panel next to the button and you can choose the alignment as well.
You can take a look at the documentation
How to get the button
If you take a look at the tap listener signature : http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap
You can see that the first parameter is the button itself so :
listeners: {
tap: function (myButton, myEvent) {
... // create your panel
myPanel.showBy(myButton);
}
}
Hope this helps
I am trying to use an ActionSheet to present the user several options to continue. I want to add a simple text box in the middle of the screen to describe the problem to the user.
Is there a simple/standard way to put such a prompt in Sencha-Touch?
You'll need to do something like this on your overlay ...
if (!this.popup) {
this.popup = new Ext.Panel({
hideOnMaskTap: false,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
width: 300,
height: 200,
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>msg here</p>'
});
}
this.popup.show('pop');
The key here being hideOnMaskTap: false, this will prevent the overlay from disappearing when you click in it's masked area.
You can then display your action sheet but you must remember to hide the overlay in the handler(s) for your action sheet buttons since it will no longer go away when you tap in the masked area.
if (!this.actions) {
this.actions = new Ext.ActionSheet({
items: [{
text: 'decline',
ui: 'decline',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'save',
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}, {
text: 'cancel',
scope: this,
handler: function() {
this.doWhateverYouNeedToDo();
this.actions.hide();
this.popup.hide();
}
}]
});
}
this.actions.show();
note the hiding of the overlay in the sheet handlers.. (i don't do it above but you'll more than likely want to destroy the overlay and the action sheet after they are hidden as well just to keep things tidey)
You can use an Overlay popup to display a message after the ActionSheet renders.