I have an XTemplate to display html data as shown below
var headerTmp = new Ext.XTemplate(
'<br><br><br>',
'<div class="contact-display-container" style="height:100px; width:400px">',
'<div style="font-size:12px; left:15px">Hello </div>',
'</div>',
'<br><br><br>'
);
I am referring the data in a dataview
var dataView1 = new Ext.DataView({
autoScroll: false,
tpl: headerTmp,
itemSelector: 'div.contact-display-container'
});
I am trying to display the data in a window
var win = new Ext.Window({
height:700,
width:700,
border:false,
modal:true,
title: 'Review Contact Information',
items:[{
layout : 'vbox',
items : [dataView1]
}],
buttons:[{
text: 'Cancel',
handler:function(){
win.close();
}
}]
});
win.show();
But the data "Hello" is not displayed on the window. Can you please tell me where am I going wrong.
Thanks in advance :)
A dataview should be bound to an instance of a store. Try adding a store config to your dataview.
You are overnesting items in your window. You should add dataView directly as a child item to your window. If you need an extra parent level panel, either change it's layout to something like fit or if you want to keep it as a vbox, add a flex config to the dataview.
Here's a working example:
http://jsfiddle.net/KUqM9/419/
Related
I have tried adding buttons to HBox and FlexBox dynamically
In the XML view i have did as below:
<HBox id="upperchart">
<m:Input value=" Key Code " editable='false' width='360px'/>
</m:HBox>
<FlexBox
alignItems="Start" id="lowerchart">
<FlexBox>
In the controller I tried accessing these with the ID's as
Controller:
var lowerHBox = this.getView().byId("lowerchart");
var upperHBox = this.getView().byId('upperchart');
var oHBox = new sap.m.HBox();
oHBox.addItem(new sap.m.Input({
value: "Test Data",
editable: false,
width: graphWidth*10 + 'px'
}));
upperHBox.addItem(oHBox);
var oMyFlexbox = new sap.m.FlexBox();
// I am adding Buttons to HBox dynamically
for (var i = 0; i < 5.length; i++){
oMyFlexbox.addItem(new sap.m.Button({
text: "Button",
width: allWidths[i]*10 + 'px'
}));
}
lowerHBox.addItem(oMyFlexbox);
Here the thing is When i just navigate through the page it gets created multiple times.
so i have tried to remove on first and add as again under this as:
lowerHBox.removeItem();
upperHBox.removeItem();
But this doesn't work to my luck ,
May I know how can I avoid it creating again and again or check if items already exists remove and create a new like this..
Any help or guiding links are appreciated thanks in advance.
You can remove the items of HBox here as:
lowerHBox.removeAllItems();
upperHBox.removeAllItems();
This could remove Items which I understood is one of your Q's
link to docs:
https://sapui5.hana.ondemand.com/#/api/sap.m.HBox%23methods/Summary
I Would wait for other expert's say for more efficient way :)
I need to add an image on the header of a freestyle portal site which when clicked should open a new window with a specific URL.
Currently tried adding the below code but it appears very small, just like a profile picture. But our requirement is to make it appear more like a logo and on the right side (as an header end item).
var oImageItem = new sap.ushell.ui.shell.ShellHeadItem("imageId", {
icon: "/images/image1.png",
tooltip: "Click here",
//height: "100%",
showSeparator: false,
href: "HarcodeURL",
target: "_blank"
});
oRendererExtensions.addHeaderEndItem(oImageItem);
This link could be very interesting: How to place logo or icon at the Center of Unified Shell header?
You have to change "Center" to "Right" and "Icon" to "Image"
That would look like this:
var oShell = new sap.ui.unified.Shell("oShell", {
header: [
new sap.m.FlexBox({
justifyContent: sap.m.FlexJustifyContent.Center,
items: [
new sap.ui.core.Icon({
src: "sap-icon://home"
})
]
})
]
});
You also could change the "FlexBox" to a "VBox".
This element doesn't exist. Use the "sap.m.Image" element. (SDK sap.m.Image)
Code with XML: <m:Image src="/images/image1.png" width="100px" press="openNewWindow">
Code with JS:
var oImageItem = new sap.m.Image("imageId", {
src: "/images/image1.png",
tooltip: "Click here",
width: "100px",
press="openNewWindow"
});
Press Event in Controller:
openNewWindow: function(){
window.open("https://www.hypej.com");
},
I am attempting to show data from a table item in the controls of a dialog. Here is a Plunker: https://plnkr.co/edit/MPHT17Hf4xNj3ZuuNXMd?p=preview
And here is the code specifically which gets the item data and sets it in the 'detailItem' JSONModel:
onItemPress: function(evt) {
var me = this;
var view = me.getView();
var item = evt.getSource().getBindingContext('list').getObject();
view.getModel('detailItem').setData(item);
var dlg = new sap.m.Dialog({
title: 'Edit Item',
type: 'Message',
content: [
new sap.m.VBox({
items: [
new sap.m.Label({
text: 'Section'
}),
new sap.m.Input({
value: '{detailItem>sectionId}'
}),
new sap.m.Label({
text: 'Cost'
}),
new sap.m.Input({
value: '{detailItem>costId}'
})
]
})
],
beginButton: new sap.m.Button({
text: 'Ok',
press: function() {
dlg.close();
}
}),
endButton: new sap.m.Button({
text: 'Cancel',
press: function() {
dlg.close();
}
}),
afterClose: function() {
dlg.destroy();
}
}).open();
}
The Plunker is pretty straight forward. Basically, I want to select an item in the table, open a dialog with a couple input fields allowing the data to be edited. I am trying to bind the input fields to the selected item by setting the data for the 'detailItem' model and attempting to bind the value property of the input fields to the respective data element.
Here is a working example (forked from yours): embed.plnkr.co/ictpCHG0R3H3jtsCmHKW.
The approach with the relative binding syntax was alright. We don't, however, need a second model, so replace {detailItem> with {list> in your dialog. Then, we can set the given binding context (from the selected item) to the dialog so that the relative bindings inside the dialog can be resolved:
dialog.setBindingContext(item.getBindingContext("list"), "list")
But that alone isn't enough. The dialog still won't display the selected data because it's not a descendant of the view and thus the "list" model is unknown to it.
One way to solve this problem is to add the dialog to the dependents aggregation of the view or any other control in the view. By this, the model will be propagated to the dialog. And as a bonus effect, it will be destroyed together when the principal control gets destroyed:
Special aggregation dependents is connected to the lifecycle management and databinding, but not rendered automatically and can be used for popups or other dependent controls or elements. This allows the definition of popup controls in declarative views and enables propagation of model and context information to them. [src]
Since all controls provide the aggregation <dependents>, you can also move the dialog definition from the controller to the view.
I'm trying to modify the TinyMCE 4 "link" plugin to allow users to select content from ListBox elements that are dynamically updated by AJAX requests.
I'm creating the ListBox elements in advance of editor.windowManager.open(), so they are initially rendered properly. I have an onselect handler that performs the AJAX request, and gets a response in JSON format.
What I need to do with the JSON response is to have it update another ListBox element, replacing the existing items with the new results.
I'm baffled, and the documentation is terribly unclear. I don't know if I should replace the entire control, or delete items and then add new ones. I don't know if I need to instantiate a new ListBox control, or render it to HTML, etc.
Basically, I have access to the original rendered ListBox (name: "module"} with
win.find('#module');
I have the new values from the AJAX request:
var data = tinymce.util.JSON.parse(text).data;
And I've tried creating a new Control configuration object, like
newCtrlconfig = {
type: 'listbox',
label: 'Class',
values: data
};
but I wouldn't know how to render it, much less have it replace the existing one.
I tried
var newList = tinymce.ui.Factory.create(newCtrlconfig);
and then
newList.renderHtml()
but even then, the rendered HTML did not contain any markup for the items. And examining these objects is just frustrating: there are "settings", "values", "_values", "items" all of which will happily store my values, but it isn't even clear which of them will work.
Since it's a ListBox and not a simple SELECT menu, I can't even easily use the DOM to manipulate the values.
Has anyone conquered the TinyMCE ListBox in 4.x?
I found this on the TinyMCE forum and I have confirmed that it works:
tinymce.PluginManager.add('myexample', function(editor, url) {
var self = this, button;
function getValues() {
return editor.settings.myKeyValueList;
}
// Add a button that opens a window
editor.addButton('myexample', {
type: 'listbox',
text: 'My Example',
values: getValues(),
onselect: function() {
//insert key
editor.insertContent(this.value());
//reset selected value
this.value(null);
},
onPostRender: function() {
//this is a hack to get button refrence.
//there may be a better way to do this
button = this;
},
});
self.refresh = function() {
//remove existing menu if it is already rendered
if(button.menu){
button.menu.remove();
button.menu = null;
}
button.settings.values = button.settings.menu = getValues();
};
});
Call following code block from ajax success method
//Set new values to myKeyValueList
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'newtext', value: 'newvalue'}];
//Call plugin method to reload the dropdown
tinyMCE.activeEditor.plugins.myexample.refresh();
The key here is that you need to do the following:
Get the 'button' reference by taking it from 'this' in the onPostRender method
Update the button.settings.values and button.settings.menu with the values you want
To update the existing list, call button.menu.remove() and button.menu = null
I tried the solution from TinyMCE forum, but I found it buggy. For example, when I tried to alter the first ListBox multiple times, only the first time took effect. Also first change to that box right after dialogue popped up didn't take any effect.
But to the solution:
Do not call button.menu.remove();
Also, the "hack" for getting button reference is quite unnecessary. Your job can be done simply using:
var button = win.find("#button")[0];
With these modification, my ListBoxes work just right.
Whole dialogue function:
function ShowDialog() {
var val;
win = editor.windowManager.open({
title: 'title',
body: {type: 'form',
items: [
{type: 'listbox',
name: 'categorybox',
text: 'pick one',
value: 0,
label: 'Section: ',
values: categories,
onselect: setValuebox(this.value())
},
{type: 'listbox',
name: 'valuebox',
text:'pick one',
value: '',
label: 'Page: ',
values: pagelist[0],
onselect: function(e) {
val = this.value();
}
}
]
},
onsubmit: function(e) {
//do whatever
}
});
var valbox = win.find("#valuebox")[0];
function setValuebox(i){
//feel free to call ajax
valbox.value(null);
valbox.menu = null;
valbox.settings.menu = pagelist[i];
// you can also set a value from pagelist[i]["values"][0]
}
}
categories and pagelist are JSONs generated from DB before TinyMCE load. pagelist[category] = data for ListBox for selected category. category=0 means all.
Hope I helped somebody, because I've been struggling this for hours.
It looks like the tinyMCE version that is included in wordpress 4.3 changed some things, and added a state object that caches the initial menu, so changing the menu is not enough anymore.
One will probably have to update the state object as well. Here is an example of updating the menu with data coming from an ajax request:
editor.addButton('shortcodes', {
icon: 'icon_shortcodes',
tooltip: 'Your tooltip',
type: 'menubutton',
onPostRender: function() {
var ctrl = this;
$.getJSON( ajaxurl , function( menu) {
// menu is the array containing your menu items
ctrl.state.data.menu = ctrl.settings.menu = menu;
});
}
});
As far as I can tell, these other approaches are broken in TinyMCE 4.9.
After spending most of the day tinkering to fix my own usage of these approaches, this is the working function I've found:
function updateListbox(win, data) { // win is a tinymce.ui.Window
listbox = win.find('#listbox'); // Substitute your listbox 'name'
formItem = listbox.parent();
listbox.remove();
formItem.append({
label: 'Dynamic Listbox',
type: 'listbox',
name: 'listbox',
values: data
});
}
Let's say I have multiple nested panels (plain ones, not form.Panel) containing form fields.
The user can copy such a panel and its fields to a different panel.
I somehow need to add those newly created fields to a main formpanel so they get submitted, but don't know how.
I can't do
formpanel.add(fields)
because then they're rendered to the formpanel's body and not the panel they were in in the first place. Setting the fields' renderTo property doesn't help either.
So basically I need a way of adding a field to a normal panel (or any other component for that matter), but also adding it to a specific formpanel so its values are submitted on form submit.
Has anyone done this or could at least point me in the right direction?
You can wrap all your panels inside one form panel and all the fields inside will be submitted. I did this way with accordeons, tabpanel and normal panels deeply nested inside each other. Example:
var form = Ext.create('Ext.form.Panel', {
// form attributes goes here...
// ...
initComponent: function(){
// all your panels goes here.
this.items = [
{
xtype:'panel',
title: 'First panel',
layout: 'anchor',
frame: true,
defaults: {anchor: '100%'},
items: [
{xtype:'textfield', name: 'foo',fieldLabel: 'Foo'},
{xtype:'textfield', name: 'foo',fieldLabel: 'Bar'}
]
},
{
xtype:'panel',
title: 'Second panel',
layout: 'anchor',
frame: true,
defaults: {anchor: '100%'},
items: [
{xtype:'textfield', name: 'baz',fieldLabel: 'Baz'},
{
xtype: 'panel',
items: [/* another set of fields */]
}
]
},
];
this.buttons = [/* ... your buttons here ...*/];
this.callParent(arguments);
}
});