Currently I have a toolbar with some buttons, here is how I create it :
HTML
<div id="toolbarContainer1" style="direction: rtl"></div>
Javascript
var dataArray= [
new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function () { changeView('view3') } }),
new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function () { changeView('view2') } }),
new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function () { changeView('view1') } })
];
window.createImperativeToolBar = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
data: new WinJS.Binding.List(dataArray)
});
var thisToolbar = document.querySelector('#toolbarContainer1');
thisToolbar.winControl.closedDisplayMode = 'full';
}
I've tried doing adding it like so :
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
It gets appended to the DOM but it looks like the options aren't working. The div (flyout) in the dom has no id as I've set above.
I want to show the flyout on button click :
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
}
But obviously because the ID doesn't get set, an error gets logged. Any ideas ?
Here is a fiddle of what I have tried : https://jsfiddle.net/reko91/yg0rs4xc/1/
When you create a win-control like so:
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
The id "formatTextFlyout" is only the the id of this flyout control.
But you use document.getElementById("formatTextFlyout") method to find this control, the problem is here, this method can only find the html element object with the Id "formatTextFlyout", and there is no one. You can refer to getElementById method.
One solution here is you create a Flyout like so:
HTML:
<div id="flyoutContainer"></div>
Javascript:
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("flyoutContainer").winControl.show(formatTextButton);
}
Or
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
flyout.show(selectedButton);
}
If you read the sample of WinJS.UI.Flyout object there, you will find in html file, it creates a Flyout like so:
<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout"
aria-label="{Format text flyout}">
The html element is div and has a id "formatTextFlyout".
Addition: In the website Try WinJS, there are a lot of win-control samples which written with html+javascript+css.
Related
I'm using the following code to create the legends in Openlayers http://viglino.github.io/ol-ext/examples/legend/map.control.legendstat.html.
A question, I would like to insert html tag, for example, the link to a page. It's possible?
You can inspect the code of the example on the site. You will see the following
legend.addItem({ title:'2.600.000', properties: { pop: 2600000 }, typeGeom: 'Point'});
The added row's fire a select event, so you could add a title and your href link to the properties and open that link on select.
Here is a better example of this component:
https://viglino.github.io/ol-ext/examples/legend/map.control.legend.html
EDIT:
const legend = new ol.legend.Legend({
title: 'Legend',
})
const legendCtrl = new ol.control.Legend({
legend: legend,
collapsed: false
});
legend.addItem({ title: 'Google', properties: {link: 'http://www.google.com'} });
legend.addItem({ title: 'Apple', properties: {link: 'http://www.apple.com'} });
legend.on('select', function(event) {
window.open(event.item.get('properties').link);
});
I have a tab panel like this
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.TabPanel', {
items: [
{
title: 'First Tab',
id: 'firstTab'
xclass: 'viewClass'
},
{
title: 'Second Tab',
xclass: ''
}
]});}});
in the xclass component there is the path of a class where is defined the view. In the view should be a button, after tap on it, the view should refresh and show another class, for example the view should be defined by 'viewClass2' and not anymore by 'viewClass'
I'm imaging a function triggered on button tap like this:
function(): {
Ext.getCmp('firstTab').xclass = 'viewClass2';
this.getView().refresh() // but it doesen't exist
}
What can i do to change the view?
You can't dynamically change view type.
You can only remove the view and add other one.
Suppose view:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.TabPanel', {
id: 'tabId',
items: [
{
title: 'First Tab',
id: 'firstTab'
xclass: 'viewClass'
}
]
});
}
});
And the function in some one button should be:
a = function() {
Ext.getCmp('tabId').remove(Ext.getCmp('firstTab'));
Ext.getCmp('tabId').add({'xclass':'viewClass2'})
}
Im using this tool here http://craftpip.github.io/jquery-confirm/#dialog and i wanted to have a popup that has a variable amount of buttons based on a piece of data used to construct pop up.
Here is an example of what a very simple/empty one looks like.
$.confirm({
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
});
What i want is to be able to put a foreach loop in side of "buttons: { ... }".
Is there a way to do so or a way to achieve what i am trying to do?
Just build your options object before :
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {},
};
$.each( variable_name, function(){
options.buttons[ this.btn_name ] = this.fn;
} );
$.confirm( options );
Of course, everything depends on how the object you loop looks like, but the logic is here.
Your logic is inverted. The following is an object:
{
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
}
So you could do:
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
};
$.confirm(options);
You then can add items by
options.buttons["mybutton"] = function() { };
You can place the previous code in a loop and change the string "mybutton" to whatever you want for whatever functions you have. You're basically asking how to add a property to and existing javascript object.
I want to do something like this jsfiddle example, I need to put some custom attributes on left panel properties. Below I tried to make similarly but I can't drag the field
YUI().use('aui-form-builder',function (Y) {
Y.MyFormCustom = Y.Component.create({
NAME: 'form-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.FormBuilderFieldBase,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
var availableFields = [
{
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'custom'
}
];
myform= new Y.FormBuilder({
availableFields: availableFields,
boundingBox: '#myHolder'
}).render();
I don't know why the form is not appearing. Any help will be appreciated.
Your example has been very helpful to me because I also needed to extend the Form Builder fields.
The fix to the above is simple.
Replace the line:
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
by
Y.FormBuilderField.types['custom'] = Y.MyFormCustom;
This solution is inspired from the source code found in the Alloy UI API.
See link:
AlloyUI Form Builder
Cheers
Having a really hard time figuring this out. I need to submit a form in an ExtJS application and then download the data in a .CSV file. The problem is, the way ExtJS has me submitting the form with "isUpload" the parameters I'm POSTing are being sent as "mulitpart/form-data" and I can't consume them or parse them. I have multiple values of the same input field name.
field: A
field: B
field: C
When I submit for my grids they go over as multiple instances like above. As soon as I introduce "isUpload" to the form they go overs as:
field: A,B,C
My program reads field as "A,B,C" and not three separate instances of field!
Here's my code. Interesting that when I examine in Firebug the Params tab looks correct, but the POST tab has then all in one value.
I just recently added the parameters to the url to try and fake it out!
Ext.Ajax.request({
url : '/cgi-bin/cgijson007.pgm' + '?' + parameters,
form : myForm,
params : parameters,
standardSubmit : true,
isUpload : true
});
isUpload: true only defines that you want to upload a file along with fields, so multipart is correct. To download I recommend you to use a hidden frame. For that use a helper defined within a Namespace.
helper.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
// Use it like
helper.util.HiddenForm('my/realtive/path', [["fieldname","fieldValue"]]);
If the server answer with a download the save window will popup.
Below is how I handler a post download on a grid listing:
First, I create html form container with hidden filed contains the parameters to post, and also a submit function.
var txtFileId = Ext.create('Ext.form.field.Hidden', { name: 'fid', value: 0 });
var dwFrm = Ext.create('Ext.container.Container', {
autoEl: { tag: 'form', method: 'POST', target: '_BLANK',
action: '/download/files' }, style: { hidden: true },
items: [txtFileId, {
xtype: 'hidden', name: 'userId', value: '1111'
}],
submit: function (fid) {
if (fid) {
txtFileId.setValue(fid);
this.el.dom.submit();
}
}
});
Second, I dock the above component into grid's toolbar
var grid = Ext.create('Ext.grid.Panel', {
.....
dockedItems: [Ext.create("Ext.Toolbar", {
dock: "top", items: [
dwFrm,
{ text: "Download Selected",
handler: function () {
var sm = grid.getSelectionModel();
if (!sm.hasSelection()) return null;
var recs = sm.getSelection();
dwFrm.submit(recs.data.id);
}
}
]
})]
.....
});
This works perfectly. Arrays included.
downloadFile: function (url, params) {
debugger;
var body = Ext.getBody(),
frame = body.createChild({
tag: 'iframe',
cls: 'x-hidden',
id: 'hiddenform-iframe',
name: 'iframe'
}),
form = body.createChild({
tag: 'form',
method: 'POST',
cls: 'x-hidden',
id: 'hiddenform-form',
action: url,
target: 'iframe'
});
for (var i in params) {
if (Ext.isArray(params[i])) {
for (var j = 0; j < params[i].length; j++) {
form.createChild({
tag: 'input',
type: 'hidden',
cls: 'x-hidden',
id: 'hiddenform-' + i,
name: i,
value: params[i][j]
});
}
} else {
form.createChild({
tag: 'input',
type: 'hidden',
cls: 'x-hidden',
id: 'hiddenform-' + i,
name: i,
value: params[i]
});
}
}
form.dom.submit();
return frame;
}