Why does insertHTML('text') render as "undefined"? - extjs

When I execute the following extJS code, it shows me "undefined" instead of the text that I want to insert into the div.
result
How do I insert HTML into my extJS element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<style type="text/css">
body {
padding: 20px;
}
div#message {
margin: 10px 0 0 0;
}
</style>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title>Simple extJS</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
console.info('check to see if this shows up in firebug');
Ext.get('buttonInfo').on('click', function() {
var message = Ext.get('message');
message.insertHtml('this is the information');
});
});
</script>
</head>
<body>
<button id="buttonInfo">Info</button>
<div id="message"></div>
</body>
</html>
#flo, if i use innerHTML it is not recognized on the extJS object:
More attempts that didn't work


Edit:
Sorry, missed important bits of your question.
Don't know extJS, I'm afraid.
I'm still wondering if it wouldn't be simpler just to use the regular DOM, as this seems to be what you're trying to achieve anyway:
var x=document.getElementById("message");
x.innerHTML = 'this is the information';
Edit2: After a bit of searching, I came up with this:
var message = Ext.get('message');
Ext.DomHelper.insertHtml('afterBegin', message, 'this is the information');
Edit3: This answer is a mess, but here we go:
Ext.DomHelper.insertHtml('afterBegin', message.dom, 'this is the information');
or
message.update('text');


I finally found the answer:
message.insertHtml('beforeThis', 'insert this');
the first parameter can be one of these:
beforeBegin, afterBegin, beforeEnd, afterEnd
if you want to just change the text, as in jquery .html(), use:
message.update('new content');

Related

java script .createelement('''button") issue

I want to take information from another java script data file and when I click on the button "kingdom" another buttons to be created and the information for them to be given from the other data file.
Here is my code but it doesn't work properly:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="Taxonomy.js"></script>
<script type="text/javascript" src="Page.html"></script>
</head>
<body>
<button type="button" id="kingdom" style="position:absolute;left:700px;"
onclick="tree()"></button>
<script type="text/javascript">
var mydata=Taxonomy;
document.getElementById("kingdom").innerHTML=mydata[0][2];
let isitshown;
function tree() {
for(let i=0;i<mydata.length;i++){
if(mydata[i][2]=="phylum"){
let n=document.createElement("button");
n.innerHTML=mydata[i][3];
}
}
}
</script>
</body>
</html>
and here is part of my data file:
var Taxonomy = [
[36064765,0,"kingdom","Plantae"],
[36064766,36064765,"phylum","Tracheophyta"],
[36064767,36064766,"class","Magnoliopsida"],
[36064768,36064767,"order","Fagales"],
[36064769,36064768,"family","Nothofagaceae"],
[36064880,36064767,"order","Ericales"],
[36064881,36064880,"family","Scytopetalaceae"],
[36065385,36064767,"order","Garryales"],
[36065386,36065385,"family","Eucommiaceae"],
[36065387,36064767,"order","Saxifragales"],
[36065388,36065387,"family","Penthoraceae"],
[36065805,36064767,"order","Malpighiales"],
[36065806,36065805,"family","Chrysobalanaceae"],
[36065807,36064767,"order","Myrtales"],
[36065808,36065807,"family","Myrtaceae"],
[36065809,36065805,"family","Irvingiaceae"],
[36066064,36064880,"family","Napoleonaceae"],
[36066187,36064767,"order","Caryophyllales"],
[36066188,36066187,"family","Droseraceae"],
[36066189,36064766,"class","Cycadopsida"],
[36066190,36066189,"order","Cycadales"],
[36066191,36066190,"family","Zamiaceae"],
[36066205,36064767,"order","Fabales"],
[36066206,36066205,"family","Fabaceae"],
[36066219,36066190,"family","Cycadaceae"],
[36066239,36064765,"phylum","Marchantiophyta"],
[36066240,36066239,"class","Marchantiopsida"],
[36066241,36066240,"order","Marchantiales"],

let n = document.createElement("button"); only stores the element in the variable n, it doesn't add it to the page. You also have to add it to the body with document.body.append(n);

UI Grid header taking up entire page

So, I've been beating my head against the wall on a problem where angular-ui-grid's header is taking up the entire height of the screen.
I've reduced the issue down to one file in one plunk. http://plnkr.co/edit/XR7OVXjwSodqTNRBAVnv?p=preview
<html>
<head>
<title>Broken ui-grid</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="///ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script>
var app = angular.module('sample', ['ui.grid']);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.js"></script>
<script>
angular.module('sample').controller('SampleController', ['$scope', '$timeout', function($scope, $timeout) {
$scope.uiGridOptions = {
rowHeight: 36,
data: [
{ date: Date.now() / 1000, blah1: "Test data"}
]
};
$scope.uiGridOptions.columnDefs = [
{ field: "blah1", displayName: "blah", width: 150 }
];
}]);
</script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.7/ui-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body ng-app="sample" ng-controller="SampleController">
<div id="dailyGrid" ui-grid="uiGridOptions"></div>
</body>
</html>
Can anybody tell me what I'm doing wrong?

So after about an hour of searching and fiddling, I've found the problem.
All I needed to do to fix the problem was add a <!DOCTYPE html> to the document, and boom! problem solved!
<!DOCTYPE html>
<html>
... code snip ...
Plunkr with fix: http://plnkr.co/edit/6rRIcjaL1yPF6GKRTkUT?p=preview
I suspect that the browser (Google Chrome) was rendering in some non-html5 mode without the doctype. I didn't realize that there would be a difference between doctype and no doctype.
Hopefully this is useful to someone else as well.

Rendering HTML preview from Kendo Editor with Angular

I am attempting to implement the Kendo UI Editor with Angular, per the example on their demos website. So far it works pretty well;
kendo ui demos
This is what I have so far, but the problem I am having is actually rendering a fully parsed preview of the contents of the editor. When I use ng-bind-html, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use kendo.htmlEncode, but that isn't working either. I'm not quite getting the hang of this like I thought I would...
I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.
jsBin
app.js
(function(){
var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
app.controller('EditorController', function($scope, $sce){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});
app.directive('kendoHtml', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
}
};
});
})();
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/kendo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular.sanitize.js"></script>
<script type="text/javascript" src="js/kendo.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="kendoDemos">
<div ng-controller="EditorController" class="container">
<h2>Kendo Editor</h2>
<textarea kendo-editor ng-model="html"></textarea>
<h3>Kendo Editor Preview</h3>
<blockquote kendo-html="html"></blockquote>
</div>
</div>
</body>
</html>

You need to do two things:
Prevent the editor from encoding its value.
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
Avoid using kendo.htmlEncode because it will encode it one more time.
scope.$watch(attrs.kendoHtml, function() {
element.html(scope[attrs.kendoHtml]);
});
Here is the updated jsbin: http://jsbin.com/bibecima/1/edit
You can also use ng-bind-html to avoid the need of a custom directive: http://jsbin.com/kamenoju/1/edit. It will work as expected once you set the encoded option to false.

How to show alert in extjs?

While executing the following code in browser it will not shown an alert, its just shown empty page. anything wrong in the following code please help me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text.html; charset=utf-8">
<title> First Program </title>
<link rel="stylesheet" type="text/css" href ="http://localhost:8080/ext/ext-4.2.1.883/resources/css/ext-all.css"/>
<script type = "text/javascript" src = "http://localhost:8080/ext/ext-4.2.1.883/ext-all-dev.js"/>
<script type="text/javascript">
Ext.onReady(function(){
// alert("We are ready to go!");
Ext.Msg.alert("Hello World");
});
</script>
</head>
<body>
</body>
</html>

You are not calling the method properly. Ext.Msg.alert takes two parameters, title and message, as you can see in the docs.

AngularJS sample code not working - newbie

I've copied this code directly out of a book, and from what I can tell it should work, but it isn't. I'm not getting any errors, but the Recommendation value is just displaying the angular string (in curly braces), and the console.logs are never getting hit. Where am I going wrong? (Obviously there's a typo somewhere, but I don't know if it's my code or the book's).
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<form data-ng-controller="CalcController">
Starting: <input data-ng-change="computeNeeded()" data-ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>
<script>
function CalcController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
console.log("running");
$scope.funding.needed = $scope.funding.startingEstimate * 10;
console.log("funding needed: " + $scope.funding.needed);
};
$scope.$watch('funding.startingEstimate', computeNeeded);
}
</script>
</body>
</html>

Looks like this is missing an ng-app tag somewhere (I'd put it on the html). That directive tells Angular to bootstrap itself onto the page.
<html ng-app>
Edit: docs for ng-app: http://docs.angularjs.org/api/ng.directive:ngApp

Resources