I am new to Sencha Touch and trying Sencha Touch version 2 for a demo of xtemplates. This is what I have code.
Ext.application({
name: 'Templates',
launch: function(){
var content, planetInfo, planetEarth;
planetEarth = { name: "Earth", mass: 1.00 };
planetInfo = new Ext.XTemplate(
"<h2>{name}</h2>mass: {mass}"
);
content = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
tpl: planetInfo
});
content.update(planetEarth);
}
});
output for this code should be in HTML format in the panel. But I just get [object Object]. Please help.
Don't use content.update(planetEarth) method, because it is deprecated in sencha-touch-2.
Here is an example of the correct code:
Ext.application({
name: 'Templates',
launch: function() {
var content, planetInfo, planetEarth;
planetEarth = { name: "Earth", mass: 1.00 };
planetInfo = new Ext.XTemplate(
"<h2>{name}</h2>mass: {mass}"
);
content = Ext.create("Ext.Panel", {
fullscreen: true,
scroll: 'vertical',
tpl: planetInfo,
data: planetEarth
});
}
});
To update display values (Sencha Touch 2), use "setRecord(with new model instance)".
me.getSomeComponentWithTpl().setRecord(someModelInstance);
Related
I wanted to create a Tippy with a button in it:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
interactive: true,
//zIndex: 99999,}))
}
let tippyContent = function ( tpy) {
let buttonsDiv = document.createElement("div")
let btn1 = document.createElement("a")
btn1.href = `/go/${tpy.url}`
buttonsDiv.appendChild(btn1);
return buttonsDiv.innerHTML;
}
But as soon as I set the interactive flag to true the tippys body disappears:
After reading a bit I first thought I have a zIndex problem, but that apparently was not it.
Turns out that I missed to read a part of the FAQ section in the documentary, where it states that adding appendTo: document.body can solve the problem, which it did in my case:
let tippyActions = function() {
var tippys = document.querySelectorAll('*[id^="tippy"]');
tippys.forEach(tpy => tippy(tpy, {content: tippyContent(tpy),
placement: "left",
trigger: 'click',
allowHTML: true,
hideOnClick: false,
appendTo: document.body, // <---
interactive: true}))
}
I have a form and I am trying to apply mask when submit button is clicked but somehow mask is not displaying on form.
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
It is working in panel but in form, we are not getting anything.
Thanks in advance.
You need to call show method on Ext.LoadMask instance.
Example on https://fiddle.sencha.com/#view/editor&fiddle/3cuq
let target = Ext.create("Ext.form.Panel", {
renderTo: Ext.getBody(),
width: 400,
height: 400
});
var objMask = new Ext.LoadMask({
target: target,
msg: 'test',
//hideMode: 'display',
listeners: {
beforedestroy: function (lmask) {
//this.hide();
},
hide: function (lmask) {
//this.hide();
}
}
});
objMask.show();
I am using a sap.ui.unified.ShellLayout with a toolbar at the top and a sap.ui.core.ComponentContainer underneath. The content of the component container is exchanged on navigation while the toolbar stays. Unfortunately, the whole shell (layout) has a scrollbar although only the component container should have one.
How can I disable the scrolling for the ShellLayout?
Method init in the view:
sap.ui.unified.ShellLayout.prototype.init.call(this);
var that = this;
this.setHeaderVisible(false);
// action bar
this.oToolbar = new sap.m.Toolbar({
transparent: true,
content: [
new sap.m.ToolbarSpacer(),
new sap.m.Text({
text: "Elektronischer Einkaufszettel"
}),
new sap.m.ToolbarSpacer()
],
height: "3rem"
});
this.addContent(this.oToolbar);
this.oComponentContainer = new sap.ui.core.ComponentContainer({
name: 'router',
enableScrolling: true
});
this.addContent(this.oComponentContainer);
this.oFlexBox = new sap.m.FlexBox({
alignItems: "Start",
items: [
new sap.m.Button({
width: "100%",
type: "Transparent",
icon: "sap-icon://product",
class: "sapUiSmallMarginEnd",
layoutData: new sap.m.FlexItemData({
growFactor: 1
}),
press: function(oEvent) {
var sTarget = "Products";
that.onButtonClick(oEvent, that, sTarget);
}
}),
new sap.m.Button({
width: "100%",
type: "Emphasized",
icon: "sap-icon://cart",
class: "sapUiSmallMarginEnd",
layoutData: new sap.m.FlexItemData({
growFactor: 1
}),
press: [that, "ShopperMenu", that.onButtonClick]
}),
new sap.m.Button({
width: "100%",
type: "Transparent",
icon: "sap-icon://list",
class: "sapUiSmallMarginEnd",
layoutData: new sap.m.FlexItemData({
growFactor: 1
}),
press: [that, "RequesterMenu", that.onButtonClick]
})
]
});
this.addContent(this.oFlexBox);
Thanks
I finally found the solution in using the sap.ui.layout.FixFlex control.
Regards,
Anton
Getting the following error, even after making the script empty I go this error.
console.error: my-addon:
Message: SyntaxError: expected expression, got end of script
Panel code of my addon:
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var ss = require("sdk/simple-storage");
var button = ToggleButton({
id: "my-addon",
label: "My Addon",
icon: {
"16": "./img/16-16.png",
"32": "./img/32-32.png",
"64": "./img/64-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
contentURL: self.data.url("popup.html"),
contentScript: self.data.url("js/pop_listener.js"),
onHide: handleHide,
width: 300,
height: 550
});
Use contentScriptFile instead of contentScript
I'm trying to call a function on the parent page from a popup window. I keep getting the error Object doesn't support property or method 'GetValueFromChild'. I believe the error is on this line in the popup window -
window.top.opener.parent.Xrm.Page.GetValueFromChild(person);. I tried using window.opener.GetValueFromChild(person); but still get the same error. Any help is much appreciated. Here's the code -
//parent
$(document).ready(function () {
// This needs to be called from Child window
function GetValueFromChild(person) {
alert(person.Id);
alert(person.Name);
alert(person.Market);
}
});
//parent - jqgrid
colModel: [
{
name: 'Person', index: 'PersonName', width: 70, editable: true, edittype: 'button',
editoptions: {
value: 'Select',
dataEvents: [{
type: 'click',
fn: function (elem) {
var left = (screen.width / 2) - (700 / 2);
var top = (screen.height / 2) - (550 / 2);
var popup = window.open("popup.htm", "popup", "resizable=1,copyhistory=0,menubar=0,width=700,height=550,left='+left+',top='+top");
popup.focus();
}
}]
}
},
//popup window. this page has another jqgrid and an OK button.
$('#btnOK').click(function() {
var person= {
Id: grid.jqGrid('getCell', grid.getGridParam('selrow'), 'Id'),
Name: grid.jqGrid('getCell', grid.getGridParam('selrow'), 'Name'),
Market: grid.jqGrid('getCell', grid.getGridParam('selrow'), 'Market')
};
window.top.opener.parent.Xrm.Page.GetValueFromChild(person); //Error is on this line.
window.close();
});
Your GetValueFromChild is scoped to your ready callback. If it doesn't need to access other scoped functions and variables then simply declare it at the top level instead. If it does need to access them, you need to create a global reference to it in your callback.
Declare at top level:
// This needs to be called from Child window
function GetValueFromChild(person) {
alert(person.Id);
alert(person.Name);
alert(person.Market);
}
Export from scope:
$(document).ready(function () {
// This needs to be called from Child window
function GetValueFromChild(person) {
alert(person.Id);
alert(person.Name);
alert(person.Market);
}
window.GetValueFromChild = GetValueFromChild;
});