I've just downloaded the trial version of Ext JS 5 and I'm wondering how to use a single component instead of the whole framework. The Ext's guide doesn't seem to have a guide on this. I'm trying to use this http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html
Can I just include a JS and some images like jQuery UI?
Looking at sencha fiddle you could add the following cdn files (or pull them local) and it'll load the extjs framework. Then you could add Ext.onReady and create extjs elements on your page:
Js Files Required:
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
CSS Files Required:
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
And here is an example index.html file that loads a message box when Ext is ready:
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
});
</script>
</head>
<body>
<p>TEST SITE</p>
</body>
</html>
Edit 1 (Adding Combobox):
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
<script type="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello World!',
items: [{
html: 'Another Item Here'
}]
}).show();
Ext.create('Ext.panel.Panel', {
renderTo:'testDiv',
width: 500,
height: 500,
title: 'This is another test',
items: [{
html: 'Another test here too.'
},{
xtype:'combobox',
width:400,
displayField: 'descr',
valueField: 'descr',
store: Ext.create('Ext.data.Store',{
fields:['descr'],
data: [{
descr: 'Example 1'
},{
descr: 'Example 2'
}]
})
}]
})
});
</script>
</head>
<body>
<p>TEST SITE</p>
<div id="testDiv"></div>
</body>
</html>
Related
I wanted to get an image editor so that I can edit my pictures and add text over them so that I tried Toast UI image editor, I did as the documentation of Toast UI Image Editor says but Toast UI Image Editor isn't showing anything on my browser I'm attaching my code below. Please tell me if I did something wrong while implementing the image editor.
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<!--Toast UI stylesheet-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.min.css" integrity="sha512-WEhPru82cOhEAThEMrYXgrHXc0eR69oZF0vGzXwhNf2hSbNc/q4/fb9qeDexgrIyBU6TKfhXC/DKwxYHx5CmLA==" crossorigin="anonymous" />
</head>
<body>
<div id="tui-image-editor"></div>
<!--jQuery File-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!--Toast UI js file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tui-image-editor/3.10.0/tui-image-editor.js" integrity="sha512-n85VUN94xSJstXJvMxHC968reNaBOSy9+LRA0slHiqYzsa6sAX3ok0cupK6HTg1sIlWXncBcCVzg7YGPJ70T0w==" crossorigin="anonymous"></script>
<script>
var ImageEditor = require('tui-image-editor');
var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
includeUI: {
loadImage: {
path: '/media/profile-images/20/09/23/Koala_iaIdqm5.jpg',
name: 'SampleImage'
},
locale: locale_ru_RU,
theme: whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70
}
});
</script>
</body>
Below I'm attaching the error my browser's console is throwing
Browser's console
util.js:89 Uncaught TypeError: Cannot read property 'forEach' of undefined
at keyMirror (util.js:89)
at eval (consts.js:48)
at Object../src/js/consts.js (tui-image-editor.js:1579)
at __webpack_require__ (tui-image-editor.js:36)
at eval (util.js:38)
at Object../src/js/util.js (tui-image-editor.js:2203)
at __webpack_require__ (tui-image-editor.js:36)
at eval (invoker.js:17)
at Object../src/js/invoker.js (tui-image-editor.js:1843)
at __webpack_require__ (tui-image-editor.js:36)
You have a typo in your code
theme: whiteTheme -> theme: whiteTheme,
Here is the working example.
Reference: https://github.com/nhn/tui.image-editor/blob/master/examples/example01-includeUi.html
<html>
<head>
<meta charset="UTF-8">
<title>0. Design</title>
<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.css" rel="stylesheet">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
<style>
#import url(http://fonts.googleapis.com/css?family=Noto+Sans);
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="tui-image-editor-container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.0/fabric.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
<!-- <script type="text/javascript" src="./js/theme/white-theme.js"></script>
<script type="text/javascript" src="./js/theme/black-theme.js"></script> -->
<script>
// Image editor
var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
includeUI: {
loadImage: {
path: 'img/sampleImage2.png',
name: 'SampleImage'
},
// theme: blackTheme, // or whiteTheme
initMenu: 'filter',
menuBarPosition: 'bottom'
},
cssMaxWidth: 700,
cssMaxHeight: 500,
usageStatistics: false
});
window.onresize = function() {
imageEditor.ui.resizeEditor();
}
</script>
</body>
</html>
I am working on ASP.NET Core 2.1 MVC application. We are looking into few text editors where we can show Rich Text. I did google and came across Quill rich text editor. Its been only 60 minutes I started to read about QuillJS.
I have a text in MS word document which is bolder and underline. I have code like below. When I copy text from my WORD document and paste into my Quill editor it is pasting like plane text. I cannot see bolder and underline
Below is my simplified _Layout.cshtml which I am using
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/lib/normalize/normalize.css" />
<link rel="stylesheet" href="~/lib/jsgrid/jsgrid.css" />
<link rel="stylesheet" href="~/css/jsgrid-theme.css" />
#*Application Styles*#
<link rel="stylesheet" href="~/css/application.css" />
#*Application JS Files*#
<script src="~/js/image.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/jsgrid/jsgrid.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<!-- Quill -->
<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js" type="text/javascript" charset="UTF-8"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js" type="text/javascript" charset="UTF-8"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
#RenderSection("Scripts", required: false)
</head>
<body>
<div class="container body-content appcontainer">
#RenderBody()
</div>
</body>
</html>
Below is my complete my Index.cshtml
<div id="quillEditor" style="height: 600px; width: 100%;">
</div>
In my javascript file.
var options = {
modules: {
toolbar: false // no need of toolbar
},
theme: 'snow',
readOnly: false,
formats: ['bold', 'italic', 'link', 'strike', 'script', 'underline']
};
var quill = new Quill('#quillEditor', options);
But when I paste below code in https://quilljs.com/playground/ it works fine
var quill = new Quill('#editor-container', {
modules: {
toolbar: false
},
placeholder: 'Compose an epic...',
formats: ['bold', 'italic', 'link', 'strike', 'script', 'underline'],
theme: 'snow' // or 'bubble'
});
When I save data to mysql, it saves and a success sweetalert2 shows the response. After timer out it disappears but doesn't execute function.
My code is as below:
swal({
position: 'center',
type: 'warning',
title: 'Exam already exist',
showConfirmButton: false,
timer: 2500,
},
function () {
window.location.href = 'examination.php';
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
use onClose() function
swal({
position: 'center',
type: 'warning',
title: 'Exam already exist',
showConfirmButton: false,
timer: 2500,
onClose: () => {
window.location.href="https://google.com"
}
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.33.1/dist/sweetalert2.min.js" type="text/javascript"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
I am trying to implement Highcharts with this tutorial https://www.highcharts.com/docs/getting-started/your-first-chart but get this error:
Uncaught (in promise) Error: Highcharts error #13: www.highcharts.com/errors/13
It means the div does to render to doesn't exist, but I am pretty sure I have a div with the right class in my code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/babel" src="/js/dashboard.js"></script>
<!--link custom css file-->
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="container">
<h1 class="text-center">Your Dashboard</h1>
<div class="row">
<div class="col-xs-7">
<h3 class="text-center">Calories Today</h3>
<div class="top-left" id="cal-line">
</div>
</div>
<div class="col-xs-5">
<h3 class="text-center">Calories Over Time</h3>
<div class="top-right" id="cal-today" style="width:100% height:400px;">
</div>
</div>
</div>
</div>
</body>
</html>
And here is my JS in /js/dashboard.js:
/*global React*/
/*global ReactBootstrap*/
/*global ReactDOM*/
/*global fetch*/
/*global location*/
/*global Highcharts*/
/*global $*/
//variable to hold user data from API fetch
let user = {};
const fb_id = location.pathname.replace("/users/","");
$(document).ready(function() {
fetch("https://www.url.com/usersdata/" + fb_id)
.then(rsp => rsp.json())
.then(json => {
//we fetched the user data
if(json.error && json.error.message){
throw new Error(json.error.message);
}
user = json;
console.log(json);
$(function(){
const myChart = Highcharts.chart('top-right',{
chart:{
type: 'bar'
},
title:{
text: 'Calories Over Time'
},
xAxis:{
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis:{
title:{
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1,0,4]
},{
name: 'John',
data: [5,7,3]
}]
});
});
});
});
Anyone can help me what I am doing wrong?
Inside the <div> tag you should refer your chart using "id" not "class".
Also, when you give reference to your external js which contains the highchart, add it in the body tag not in the head.
This is from my working code.
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link rel="stylesheet" type="text/css" href="sytlels.css">
</head>
<body>
<div id="container"></div>
<script src="highChart.js"></script>
</body>
</html>
I am trying to use jquery-confirm. Please see the code and the result following. The result doesn't same with we saw on website. anything wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="../jquery-confirm-master/dist/jquery-confirm.min.css">
<script src="../jquery-confirm-master/dist/jquery-confirm.min.js"></script>
</head>
<body>
<script>
$.alert({
width :'auto',
title: 'Alert!',
content: 'Simple alert!'
});
</script>
</body>
</html>
It is working fine but not displaying as expected because you need disable bootstrap theme, see following code:
<script>
$.alert({
width :'auto',
title: 'Alert!',
content: 'Simple alert!',
useBootstrap: false // Key line
});
</script>
But if you want to use bootstrap theme you should include following CDN links in your document.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>
I disabled bootstrap and used pixels for width
boxWidth: '30%',
useBootstrap: false,
Seems like you need to add the following, or just try to add bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.0.3/jquery-confirm.min.js"></script>