In jquery dialogs we can do
$("#id").dialog('open|close')
to open close dialogs. how to do this in Magnific-popup?
$.magnificPopup.open({
items: {
src: '#id'
},
type: 'inline'
});
http://dimsemenov.com/plugins/magnific-popup/documentation.html#public_methods
Related
I am trying to extend a tinymce pluggin and need to add an input element of type=file.
(I am new to such an exercise so please pardon my ignorance.. Also could not find examples/samples to work with..)
It seems you can do the following to show elements to a container that opens in a panel :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
];
win = editor.windowManager.open({
title: 'Insert/edit image',
data: data,
bodyType: 'tabpanel',
body: [
{
title: 'General',
type: 'form',
items: generalFormItems
},
],
onSubmit: onSubmitForm });
I am interested in adding an input html of type=file (<input type="file".../>). So there should be the usual html button that will show the 'file dialog' on the browser to allow the user to pick a file. So something like this I am hoping :
var generalFormItems = [
{name: 'alt', type: 'textbox', label: 'Image description'},
{name: 'width', type: 'textbox', maxLength: 3, size: 3, onchange: recalcSize},
---> {name: 'fileSelect', type: 'file', label: 'Select a File to Upload'},
];
Is it possible to do this and how?
Managed to figure this out and want to leave the answer here for others trying to do something similar.
There is a 'subtype' on each of the UI form elements that will get added to the DOM as is. So doing the below did the trick for me :
{name: 'file', type: 'textbox', subtype: 'file', label: 'Upload', onchange: uploadFile},
In TinyMCE 3.x all dialogs where HTML pages that got loaded into a iframe or window. This was changed in TinyMCE 4 to make it easier to make plugins and fully support CDN:s. But you can still load HTML based pages into TinyMCE dialogs by using the WindowManager.
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Insert/edit image',
url: 'dialogTemplate.html',
width: 700,
height: 600
});
Also you can inline HTML:
// Opens a HTML page inside a TinyMCE dialog
editor.windowManager.open({
title: 'Upload a file to attach',
html: '<input type="file" class="input" name="file" id="file_attach" style="font-size: 14px; padding: 30px;" />',
width: 450,
height: 80,
buttons: [{
text: 'Attach',
subtype: 'primary',
onclick: function() {
// TODO: handle primary btn click
(this).parent().parent().close();
}
},
{
text: 'Close',
onclick: function() {
(this).parent().parent().close();
}
}]
});
I want to select Draw Polygon button from mapPanel toolbar in DistrictMap controller via refs for this purpose i use below selector in DistrictMap controller! but it doesn't work and i see undefined in console!
Ext.define('FM.controller.DistrictMap',{
extend: 'Ext.app.Controller',
refs:[
{
selector: 'mapPanel toolbar > #polygonButton',
ref: 'polygon'
}
],
init: function(){
this.control({
'mapPanel toolbar > button#polygonButton':{
click: this.drawPolygon()
}
});
},
drawPolygon: function(){
console.log(this.getPolygon());
}
i add toolbar to mapPanel with below code.
Ext.define('FM.view.DistrictPanel',{
extend: 'Ext.panel.Panel',
initComponent: function(){
var map = Ext.create('FM.view.MapPanel',{});
map.setPolygonControl();
map.setModifyControl();
map.setSelectControl();
map.addDocked({
xtype: 'toolbar',
dock: 'top',
items:[
{
xtype: 'button',
text: 'Draw Polygon',
enableToggle: true,
toggleGroup: "draw controls",
id: 'polygonButton'
}
]});
above selector can't select toolbar items!
I test 'mapPanel toolbar #polygonButton' for selector but it doesn't work! too for #polygonButton
why selector can't select toolbar items? although if i use only id #polygonButton in selector!
In the above question because districtPanel view doesn't loaded so selector can't select polygonButton in the mapPanel toolbar for fix this problem you should use controller onLaunch function instead of init function. so fixed code is:
Ext.define('FM.controller.DistrictMap',{
extend: 'Ext.app.Controller',
refs:[
{
selector: 'districtPanel mapPanel toolbar #polygonButton',
ref: 'polygon'
}
],
onLaunch: function(){
this.control({
'districtPanel mapPanel toolbar #polygonButton':{
click: this.drawPolygon
}
});
},
drawPolygon: function(){
console.log(this.getPolygon());
}
Your selector implies that FM.view.MapPanel has an xtype of mapPanel. Is it really so?
Also don't forget that controller refs and control selectors are just component selectors. You can open a console in your browser and try different selectors with Ext.ComponentQuery.query().
In Rally App SDK 2.0, I would like to show a dropdown and button in line, and a chart below. The button would export (save as) the chart as a jpeg.
1) how do I specify the div to render objects to? The below code ignores the renderTo
2) is there sample code for exporting a jpeg image? using Canvas generates error
this.add({
xtype: 'rallycombobox',
fieldLabel: 'Select an Enterprise Release',
width: '500px',
renderTo: Ext.get("dropdownDiv"),
storeConfig: {
autoLoad: true,
model: 'Program',
fetch: 'Name,Releases,ReleaseStartDate,ReleaseDate',
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
},
listeners: {
select: this._onSelect,
scope: this
}
});
this.add({
xtype: 'rallybutton',
text: 'Export',
renderTo: Ext.get("buttonDiv"),
handler: function() {
var canvas = document.getElementById("chartDiv");
var img = canvas.toDataURL("image/jpeg");
// .toDataURL generates error, TypeError: canvas.toDataURL is not a function
document.write('<img src="'+img+'"/>');
}
});
this.add({
id: 'chartCmp',
xtype: 'rallychart',
renderTo: Ext.get("chartDiv"),
flex: 1,
chartConfig: chartConfig
});
// here is the body statement, removed <> so it will show
body
table
tr
td
div id="dropdownDiv" style="height:50px; width:500px;"/div
/td
td
div id="buttonDiv" style="height:50px; width:50px;"/div
/td
/tr
/table
div id="chartDiv"/div
/body
In Ext there are two ways to get a component rendered. The first is by adding a config object with an xtype to a container. That would be the this.add(); lines in your app. The second is by instantiating the component using Ext.create and specifying a renderTo in its config.
this.add({xtype: 'component', html: 'hello world'});
Ext.create('Ext.Component', { html: 'hello world', renderTo: 'aDiv' });
The preferred way is the first since then your component participates in the layout of the app. Also the preferred way for creating dom elements in an app (especially for initial layout) is through the items config rather than static html in the app body.
So:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{ xtype: 'container' itemId: 'dropdownDiv' },
{ xtype: 'container', itemId: 'chartDiv' }
]
});
And then you can add content in the launch method like so:
this.down('#chartDiv').add(chartConfig);
As far as your canvas question goes I'm not sure. You may want to post that as a separate question with more details on the specific error.
Problem:
I switch Panels using setActiveItem() according to question-answer on this link
App.views.viewport.getActiveItem().setActiveItem(App.views.Panel, { type: 'slide', direction: 'left' });
Everything works fine, but how can I access my back button?
I suspect that theres only 1 back button, and I have to change his properties (text, handler).
How Can I do that?
Thank you, Shlomi.
P.S- when thinking about it, I have to modify all the bar properties - its title as well.
I will try to answer this question referencing the previous question about panels.
First add a back button to your panel's top bar.
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos",
items:[{
xtype: 'button',
text: 'Back',
handler: function () {
}
}]
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
After that when user goes to next page, access the back button and change it's handler(I won't prefer to change handler, I prefer build a stack mechanism to go bacward but it is your choice :) ).
Mobz.views.viewport.getActiveItem() //panel
Mobz.views.viewport.getActiveItem().dockedItems.items[0] // toolbar
You are seeking back button;
Mobz.views.viewport.getActiveItem().dockedItems.items[0].items.items[0] // back button
Mobz.views.viewport.getActiveItem().dockedItems.items[0].title // toolbars title
{
xtype: 'button',
text: 'Back',
handler: function () {
App.views.viewport.setActiveItem([The panel you want to go], {type: 'slide', direction: 'right'});
}
}
Add a button in your "App.views.viewport" panel.
I'm making an iPhone app, I've got a simple segmented button in sencha touch and when I click a reset button in my settings form I want the segmented button to change the pressed button to default.
I've got something like this:
view:
var typPanel = new Ext.Panel({
layout: {type: 'hbox', pack: 'center'},
items: {
xtype: 'segmentedbutton',
id: 'dumbyt',
items: [
{
text: 'Dum'
},
{
text: 'Byt',
pressed: true
}
]
}
});
in the reset button controller i've got
setdefault: function(options) {
...
realio.views.settingsPanel.getComponent('dumbyt').setPressed(0);
}
I also tried assigning id to each button and call .setPressed('id'); but it didn't work too, any ideas?
Thanks.
Look at the arguments for setPressed:
Link