I have added a new custom button, with my own symbol image:
But the image is not placed as should :(
Can some one help?
Thanks
Chanan
Here is how i added the button:
exporting: {
buttons: {
'myButton': {
_id: 'myButton',
symbol: 'url(images/gallery/reset_zoom.jpg)',
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function() {
alert('click!')
}
}
}
}
Found the answer :) using symbolX and symbolY
exporting: {
buttons: {
'myButton': {
_id: 'myButton',
symbol: 'url(images/gallery/reset_zoom.jpg)',
symbolX:6,
symbolY:6,
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
onclick: function() {
alert('click!')
}
}
}
}
Related
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 want to add new Icon for images I add on canvas, just like mentioned in following post:
Add remove icon on image in canvas HTML5 and Fabric js
$('#remove').on('click', function(){
canvas.getActiveObject().remove();
});
canvas.on('object:selected', function(o) {
if (o.target.isType('image')) {
$('#remove').show();
}
});
canvas.on('selection:cleared', function() {
$('#remove').hide();
});
But, this solution can not work for me. I want to achieve something like done in following code:
http://jsfiddle.net/tornado1979/0fbefh52/6/
Here, I want to display any custom Image based on my code conditions.
Is there any way to achieve this.
Thanks
Thanks #Durga,
The link https://github.com/pixolith/fabricjs-customise-controls-extension has solved my problem.
Following is the way to customise the control options:
fabric.Canvas.prototype.customiseControls({
tl: {
action: 'rotate',
cursor: 'cow.png'
},
tr: {
action: 'scale'
},
bl: {
action: 'remove',
cursor: 'pointer'
},
br: {
action: 'moveUp',
cursor: 'pointer'
},
mb: {
action: 'moveDown',
cursor: 'pointer'
},
mt: {
action: {
'rotateByDegrees': 45
}
},
mr: {
action: function( e, target ) {
target.set( {
left: 200
} );
canvas.renderAll();
}
},
// only is hasRotatingPoint is not set to false
mtr: {
action: 'rotate',
cursor: 'cow.png'
},
}, function() {
canvas.renderAll();
} );
I have a page showing a list of contact and clicking on one of the contacts in the view should switch to detail state as below:
dashboard-contacts-controller.js
vm.viewContact = function(contactId) {
console.log("Load contact " + contactId);
$state.go("app.dashboards_contact", {"id": contactId});
}
contacts-module.js
.state('app.dashboards_contact', {
url: '/dashboard-contact/:id',
views: {
'content#app': {
templateUrl: 'app/main/apps/dashboards/contacts/about/about.html',
controller: 'DashboardContactController as vm'
}
},
resolve: {
contact: ['DashboardContactsDataService', function($stateParams, DashboardContactsDataService) {
console.log($stateParams.id);
return DashboardContactsDataService.get($stateParams.id);
}
]
},
bodyClass: 'dashboard-contact'
});
$stateParams.id in resolve is always undefined.
You didnt inject $stateParams in resolve. Shouldn't it be
resolve: {
contact: ['$stateParams', DashboardContactsDataService', function($stateParams, DashboardContactsDataService) {
console.log($stateParams.id);
return DashboardContactsDataService.get($stateParams.id);
}
]
},
I want to override the image plugin in CKeditor. When I right click on an image I want to open my own dialog. Can anyone point me in the right direction. I've done a basic plugin which I copied from the CKeditor site - How do I swap this to replace the image editor.
CKEDITOR.plugins.add('myplugin',
{
init: function (editor) {
editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog'));
if (editor.contextMenu) {
editor.addMenuGroup('mygroup', 10);
editor.addMenuItem('My Dialog',
{
label: 'Open dialog',
command: 'mydialog',
group: 'mygroup'
});
editor.contextMenu.addListener(function (element) {
return { 'My Dialog': CKEDITOR.TRISTATE_OFF };
});
}
CKEDITOR.dialog.add('mydialog', function (api) {
// CKEDITOR.dialog.definition
var dialogDefinition =
{
title: 'Sample dialog',
minWidth: 390,
minHeight: 130,
contents: [
{
id: 'tab1',
label: 'Label',
title: 'Title',
expand: true,
padding: 0,
elements:
[
{
type: 'html',
html: '<p>This is some sample HTML content.</p>'
},
{
type: 'textarea',
id: 'textareaId',
rows: 4,
cols: 40
}
]
}
],
buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton],
onOk: function () {
// "this" is now a CKEDITOR.dialog object.
// Accessing dialog elements:
var textareaObj = this.getContentElement('tab1', 'textareaId');
alert("You have entered: " + textareaObj.getValue());
}
};
return dialogDefinition;
});
}
});
Hi the reason I wanted to do this was that we have our image editor control which for "usability" reasons we need to carry on using. It gets used in different bits of the site and two dialogs would confuse people. In summary what I did was
Remove the image plugin CKEDITOR.config.removePlugins = 'image, forms, div,flash,iframe,table';
Add extra plugins extraPlugins: 'tinsertimage,teditimage,teditlink,tinsertlink,teditimagelink' on creating the CKEditor
In the plugin run some JS which intercept the right click on the image
CKEDITOR.plugins.add('teditimage',
{
init: function (editor) {
editor.addCommand('tEditImage',
{
exec: function (editor) {
//This opens the custom editor
ZWSInlineEditor.openImageProperties(editor, false);
}
});
if (editor.addMenuItem) {
// A group menu is required
// order, as second parameter, is not required
editor.addMenuGroup('gImage');
// Create a manu item
editor.addMenuItem('gEditImageItem', {
label: 'Edit Image Properties',
command: 'tEditImage',
group: 'gImage'
});
}
if (editor.contextMenu) {
editor.contextMenu.addListener(function (element, selection) {
// Get elements parent, strong parent first
var parents = element.getParents("img");
// Check if it's strong
if (parents[0].getName() != "img")
return null; // No item
return { gEditImageItem: CKEDITOR.TRISTATE_ON };
});
}
}
});
I don't understand what's the point in what you're doing (or please explain us). Maybe you should rather customize dialogs than do things from scratch?
First Q: is
controller.init function () {
this.control(
{
"live"? so that any further components added later on via UI events are also under the controllers watchful eye?
I am struggling to catch dynamically added link clicks by the controller:
controller
init: function () {
this.control(
{
'component[cls=pfLink]': {
click: this.onPfLinkClicked // NEVER GETS HERE
},
'component': {
click: this.onPfLinkClicked // DOESNT EVEN GET HERE
}
view
after store load:
var cmp = Ext.create('Ext.Component', {
autoEl: {
tag: 'a',
href: '#',
cls: 'pfLink',
html: ref
}
});
this.add( {
cellCls: 'question',
xtype: 'container',
items: cmp
});
...
By default they are dynamic, you can verify this:
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'button[isOdd]': {
click: function(btn) {
console.log('Odd', btn.text);
}
},
'button[isEven]': {
click: function(btn) {
console.log('Even', btn.text);
}
}
});
}
});
Ext.require('*');
Ext.application({
name: 'MyApp',
controllers: ['Test'],
launch: function() {
var vp = new Ext.container.Viewport(),
i = 0,
timer;
timer = setInterval(function(){
++i;
vp.add({
xtype: 'button',
text: 'Button ' + i,
isOdd: i % 2 === 1,
isEven: i % 2 === 0
});
if (i === 10) {
clearInterval(timer);
}
}, 500);
}
});
Your problem is that component doesn't fire a click event. Instead, create a custom component:
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'foo[isOdd]': {
click: function(cmp) {
console.log('Odd', cmp.el.dom.innerHTML);
}
},
'foo[isEven]': {
click: function(cmp) {
console.log('Even', cmp.el.dom.innerHTML);
}
}
});
}
});
Ext.define('Foo', {
extend: 'Ext.Component',
alias: 'widget.foo',
afterRender: function(){
this.callParent();
this.el.on('click', this.fireClick, this);
},
fireClick: function(e){
this.fireEvent('click', this, e);
}
})
Ext.require('*');
Ext.application({
name: 'MyApp',
controllers: ['Test'],
launch: function() {
var vp = new Ext.container.Viewport(),
i = 0,
timer;
timer = setInterval(function(){
++i;
vp.add({
xtype: 'foo',
html: 'Button ' + i,
isOdd: i % 2 === 1,
isEven: i % 2 === 0
});
if (i === 10) {
clearInterval(timer);
}
}, 500);
}
});