I need to have a browse button in a window. I need something like...
var myWindow = new Ext.window.Window({
id:'my-window',
height: 200,
width: 400,
layout: 'fit',
buttons:[browseButton]
});
So I guess I can't use the filefield in there since I need it to be in the window's button config.
Is there any button or maybe a handler I can use to create a button that pops up a browse window like the ones in filefield do?
You can set a config item on the field to only show the button for example, this works:
myButton = Ext.create('Ext.form.field.File', {
buttonOnly: true,
hideLabel: true,
listeners: {
'change': function(button, value){
alert('Selected: '+ value);
}
}
});
// your window example
var myWindow = new Ext.window.Window({
id:'my-window',
height: 200,
width: 400,
layout: 'fit',
buttons:[myButton]
});
myWindow.show();
Related
I am using sap.m.Table to display some documents as a sap.m.Dialog.The UI looks as below:
Everything works as expected but when I scroll to the last Item (growing=true) the table rerenders and moves back to the top. Ideally that would happen only when I refresh a model. I am using bindAggregation to bind the odataModel to the UI. Please see a snippet below (Note:Partial snippet).
var dialog = new Dialog({
title: title,
buttons: [
new sap.m.Button({
text: "{i18n>close}",
press: function(oEvt) {
dialog.close();
}
})
]
});
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
dialog.addContent(table);
if (!dialog.isOpen()) {
dialog.open();
}
var oDModel = new ODataModel(kmURL, {
json: true
});
oDModel.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
table.setModel(oDModel);
var mParams = {
path: "/DocumentQuerySet",
template: template,
};
table.bindAggregation("items", mParams);
I think that bindAggregation internally refreshes the model which forces the table to rerender after every data call. How can I avoid the model to refresh/rerender the table so that it does not scroll to the top every time the user scrolls down to see more data.
Appreciate any help.
Thanks.
You could fix this problem by placing the Table control within a ScrollContainer. The ScrollContainer will handle the growing feature of the table, which causes the change in height of the control. This will retain the current position without moving back to the top.
....
var table = new sap.m.Table({
width: "100%",
inset: true,
growing: true,
growingThreshold: 100,
growingScrollToLoad: true
})
var oScroll = new sap.m.ScrollContainer({
width: "100%",
height: "500px",
vertical: true,
content: table
})
dialog.addContent(oScroll);
....
I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.
You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});
Is it possible to create a button which when pressed it replaces an existing object on the screen to another object in Smartface App Studio?
I've tried using the Onshow event on the text however it wasn't successful.
Thankyou
It is possible to replace an existing object to another object. You should create objects and add to page both of them but visible property of an object should be false on start and then you can change visible of object when button is pressed.I create a simple example for you:
var btn = new SMF.UI.TextButton({
top : "80%",
left : "10%",
onPressed : page1_btn_onPressed
});
Pages.Page1.add(btn);
var myImage = new SMF.UI.Image({
top: "20%",
left: "15%",
height: "20%",
width: "70%",
image: "default.png",
imageFillType: SMF.UI.ImageFillType.stretch,
visible : true
});
Pages.Page1.add(myImage);
var myImage2 = new SMF.UI.Image({
top: "20%",
left: "15%",
height: "20%",
width: "70%",
image: "icon.png",
imageFillType: SMF.UI.ImageFillType.stretch,
visible : false
});
Pages.Page1.add(myImage2);
function page1_btn_onPressed(e) {
myImage.visible= false;
myImage2.visible = true;
}
In Titanium for iPhone is it possible to display something above the navigation bar – or just disabling the always-top property of the navigation bar?
This is how it looks right now:
This is part of the actual Photoshop-mock-up:
The code-snippet invoking this is:
var win1 = Titanium.UI.createWindow({
title: 'Home',
navBarHidden: false,
barImage: 'topbar.png',
backgroundImage: 'bga.png'
});
c = Titanium.UI.createImageView({
image: 'logobar.png',
top: -13,
right: 7,
width: 74,
height: 108,
exitOnClose: !0
})
try {
win1.add(c);
c.animate({zIndex:3});
win1.addEventListener('focus', function () {
Titanium.App.Analytics.trackPageview('/win1')
});
}catch(e){
alert(e);
}
The try-catch was implemented as I didn't trust the existence of .animate, however it did exist but did not work.
Answer(, or maybe not what it should be like)
Titanium itself does not support the feature of manipulating the zIndex or rather the onTop-properties. However, I've found a workaround allowing the overlay to be shown.
This workaround works by the way Titanium handles windows. First, we define the main window (e.g. win1) and fill it. Then we create an assistant window (e.g. win1a) and assign the ImageView to it. Then we position the new window on top of the other window and voilà.
var win1 = Titanium.UI.createWindow({
title: "*******",
navBarHidden: false,
barImage: 'topbar.png',
backgroundColor: "gray",
});
var win1l = Titanium.UI.createWindow({
title: "",
navBarHidden: true,
height: 84,
width: 64,
right: 0,
top: 0
});
// Inject ImageView into top-most window
win1l.add(Titanium.UI.createImageView({
image: "logobar.png",
top: 2,
right: 5,
width: 60.3, //74, // 74/108 = 0.6851851852
height: 88, //108, // ((108-20)*(74/108)) = 60.29629 ~ 60.3
exitOnClose: !0
}));
win1l.open();
I hope this might have been helpful for you.
Thanks, -Kenan.
I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},