I want to integrate Medium Editor to ExtJs6 but I don't know how to do. I download the editor from https://github.com/yabwe/medium-editor. I thank you so much for your collaboration.
Add dependency library url's to index.html
Create custom component
Use afterrender method on custom component and use your library api inside it
Preserve the instance of library variable inside custom component for further use.
Its not too much complicated as it sounds from above list.
Here is an example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('widget.mediumEditor', {
extend: 'Ext.panel.Panel',
alias: 'widget.mediumEditor',
xtype: 'mediumEditor',
padding: 20,
html: "<div class='editorcontent'></div>",
height: 400,
listeners: {
afterrender: function(component) {
var mediumEditor = new MediumEditor('.editorcontent', component.editorConfig);
component.editorInstance = mediumEditor;
}
}
});
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: 'fit',
title: 'Medium editor',
items: [{
xtype: 'mediumEditor',
editorConfig: {
toolbar: {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection: true,
buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
diffLeft: 0,
diffTop: -10,
firstButtonClass: 'medium-editor-button-first',
lastButtonClass: 'medium-editor-button-last',
relativeContainer: null,
standardizeSelectionStart: false,
static: false,
/* options which only apply when static is true */
align: 'center',
sticky: false,
updateOnEmptySelection: false
}
}
}]
})
}
});
Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29v0
Related
I was trying to develop a base container by extending Ext.Container, which have some default items in it. A subclass should add the items to the child component of the base class and not directly to the container instead. How to do this?
May i override the setItems/applyItems method to add the items to navigationView.add(items); ?? I'm unsure about how this works. Since i'm new to ExtJs, unable to identify which is the way to do it generically so that it won't affect my subclass to add n number of items to it either using inline or add(item) method.
AbstractClass
Ext.define('MyApp.container.AbstractMainContainer', {
extend: 'Ext.Container',
xtype: 'abstractmaincontainer',
requires: [
'MyApp.container.NavigationView',
'MyApp.control.NavigationBar'
],
config: {
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
width: '100%'
},
controller: 'maincontroller',
items: [{
xtype: 'navbar',
itemId: 'navbar'
}, {
xtype: 'navigationview',
itemId: 'navigationview',
reference: 'navigationview',
navigationBar: false,
layout: {
pack: 'start',
align: 'stretch'
},
flex: 1,
height: '100%',
items: [
// new item should added here
]
}],
/**
* #method getContentView add the items to this rather than directly
* #return {void}
*/
getContentView: function() {
return this.down('#navigationview');
},
});
SubClass
Ext.define('MyApp.main.view.MainContainer', {
extend: 'MyApp.container.AbstractMainContainer',
requires: [
'MyApp.container.AbstractMainContainer'
],
config: {
},
items: [{
// we should not directly add items here this will remove the navbar and navigation view
// HOW TO ADD THIS IN A GENERIC WAY??
xtype: 'container',
layout:{
type:'card'
},
items: [{
xtype: 'button',
role: 'nav',
title: 'Card 1',
text: 'go to next',
handler: function() {
}
}, {
itemId: 'myCard',
title: 'Card 2',
html: '<h1>Card 2</h1>'
}],
}],
});
AFAIK, there's no "automatic" way to do it.
I can suggest some approaches:
First of all, check if you really need to do this: for example, you could move the navbar to the dockedItems config and move the navigationview one level up.
So your AbstractContainer will extend navigationview, navbar will be a dockedItem, and you will be able to use the items config as usual.
Otherwise, you could use a different config (let's say "extraItems" or "navItems"), and merge them overriding the abstract class initComponent function.
There, after a callParent that actually initialize the navigationview, you could do something like
this.down('navigationview').add(this.extraItems);
I am using the lastest sencha cmd for the build with ext-5.0.1.
Everythings look good during the development status (http://www.imageupload.co.uk/5Med) but after the build.
All the textfields collapsed like shown (http://www.imageupload.co.uk/5MeQ), and have no response to the changes in width, minWidth, flex... etc.
And also the properties y and x are not functioning.
If someone had had similar situation before, please help, thx
My cmd is v5.0.3.324
Here are part of my code:
In my Main.js:
Ext.define('ExtTest2.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'ExtTest2.view.main.MainController',
'ExtTest2.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'fit'
},
itemId:'Stage'
});
MainController.js:
Ext.define('ExtTest2.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
init: function(){
this.Start();
},
Start: function(){
var data = {
itemId: "Page_Login",
xtype: "panel",
items: [
{
padding: 30,
layout:{
type: 'vbox',
align: 'center'
},
xtype: "fieldset",
y: "30%",
height: 150,
items: [
{
xtype: "textfield",
itemId: "Textfield_Username",
fieldLabel: "用戶名稱",
labelStyle: "color:#FFFFFF"
},
{
fieldLabel: "密碼",
itemId: "Textfield_Password",
labelStyle: "color:#FFFFFF",
xtype: "textfield"
},
{
itemId: "Button_Login",
text: "登入",
width: 100,
xtype: "button"
}
]
}
]
};
var container = Ext.ComponentQuery.query('#Stage')[0];
container.removeAll();
container.add(data);
container.updateLayout();
}
});
It is overnested because you add unnecessary container to app-main containing the fields.
It is very unusual to manipulate views from view controller like that - create a class for the fieldset, give it an alias (xtype) and simply instantiate that. Cramming controller handlers together with view definitions shall inevitably lead to Spaghetti Code.
You use vbox layout, without any flex or height to hold form fields. Form fields behave best in anchor layout that is the default for Ext.form.Panel.
I am creating an app in which I have to create the popup like sencha touch theming expample to select the navigation items.
I tried to see its code on github for a hint but don't know what I am missing hare is my code for header bar and the list button.
Ext.define('ov_app.view.HeaderBar', {
xtype : 'HeaderBar',
extend:'Ext.Toolbar',
config: {
// xtype : 'toolbar',
ui: 'plain',
docked: 'top',
cls: 'menuBar',
border:0,
defaults:{
border: 0,
},
items: [
{
iconCls: 'list',
iconMask: true,
ui: 'plain',
action: 'ShowMoreOption',
},{
xtype: 'spacer'
},{
xtype: 'container',
html: '<img src="resources/images/logo.png">'
},{
xtype: 'spacer'
},{
iconCls: 'home',
iconMask: true,
id: 'homeBtn',
ui: 'plain',
action: 'push-view'
}
]
}
});
`
and code for my controller main.js to Handel the tab action on list button.
Ext.define('ov_app.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
},
'button[action=ShowMoreOption]':{
tap: 'togglMenu'
},
},
},
pushViewFunction: function() {
ov_app.container.setActiveItem(0);
},
togglMenu: function(){
console.log("hello");
}
togglMenu: function(button) {
this.getStyleBubble().showBy(button)
},
});
`
when I try to click on the list button on the top the error i see in my console is this
Uncaught TypeError: Object [object Object] has no method 'getStyleBubble'
and also I didn't see any definition for this 'getStyleBubble' function in any of the file in model, views, controller, store directories. So is it defined in any touch directories files or I am missing something.
There is no getStyleBubble() function deceleration in the controllers file also not in any file if you download the whole source code zip folder I think they have not uploaded complete source code. But i found solution to my answer. I have to create a new panel and make it toggle with the click of the list button like this.
togglMenu: function(button){
if(!this.overlay) {
this.overlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
height: 200,
width: 200,
//centered: true,
styleHtmlContent: true,
html: '<p>hello dummy content in the pop up box </p>',
scrollable: true
});
}
this.overlay.showBy(button);
`
I want to break sencha architect 2 generated code into different classes
What i want is declare a tabpanel in another class and use instantiated class in the following code.
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 430,
width: 748,
layout: {
type: 'fit'
},
title: 'Add New Business Unit',
modal: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
frame: true,
activeTab: 0,
items: [
{
I think I understand what you are trying to do. So instead of typing up an answer(I feel lazy today...), I just created a short screencast which I hope explains what your are trying to achieve. http://screencast.com/t/RhiMAreJBTwb
I'm trying to put 3 buttons on top of an xtype:'img', but I'm getting nowhere and can't find much online about it.
How does this work?
EDIT:
i have an image and when you tap it i want it to display the same image but now there are 3 options you can choose from view download share i want the buttons to look like they pop up over the image
Ext.define('Crystal.view.apphb',{
extend: 'Ext.Panel',
xtype:'apphb',
id:'panel',
requires: [
'Ext.TitleBar',
],
config:{
layout: {
type: 'card',
animation: {
type: 'fade'},
},
items:[{
xtype:'img',
src:'resources/img/apphb.png',
listeners: {
tap: function() {
Ext.getCmp('panel').setActiveItem(1);
},
},
},
{
xtype:'img',
src:'resources/img/1.png',
listeners: {
tap: function() {
Ext.getCmp('panel').setActiveItem(-1);
}
},
}
]
}
});
What I understand from your question is simple. You want to show certain buttons in a pop up on tap of image. So you use overlays and put buttons inside it.
A working fiddle with demo is here. You can display anything in you want in this pop up.
The method .showBy() let you place pop up relative to certain element passed as parameter. Here's the code,
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
items:[
{
xtype:'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
height: 64,
width: 64,
listeners:{
tap:function( img,e,opts ){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width:160,
height:90,
items:[
{
xtype:'button',
text:'Download'
}
],
styleHtmlContent: true,
scrollable: true
});
overlay.showBy(img);
}
}
}
]
});
}
what about using img as the background for the container?
xtype: 'container',
style: 'background: url(http://wallpapers.free-review.net/wallpapers/36/New_Batman_movie.jpg) no-repeat;',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'container',
flex: 1
},
{
xtype: 'container',
height: 100,
defaults: {
margin: 5,
height: 80,
width: 100
},
items: [
{
xtype: 'button',
text: 'Like'
},
{
xtype: 'button',
text: 'Tweet'
}
]
}
]
}