I have multiple container with field. Basically when container is hidden all field's are not visible. but I was checked "hidden" property or "isHidden()" method of field. I am getting as false.
I want make it as true when container is hidden and false when it is visible.
How to make field are hidden and show by using override
Your question is very hard to read. (Poor English) But if I understand correctly you hide a container with fields. If you then check the isHidden() of one of the fields, it returns false. That is standard Ext behavior. The container is hidden not the fields. What you can do is query down and set the fields hidden.
E.g.
Ext.define('MyCustomContainer', {
extend: 'Ext.Container',
hide: function () {
var me = this;
Ext.each(me.query('field'), function (field) {
field.hide();
});
me.callParent(arguments);
},
show: function () {
var me = this;
Ext.each(me.query('field'), function (field) {
field.show();
});
me.callParent(arguments);
}
});
You ask:
I don't want to create custom component. Can I do same thing by using override?
Yes you can!
I hope you don't have an Ext.Container as type it's kind of dirty overriding it for ALL containers, but it will work... => it would be better to replace Ext.Container with the specific type of your container...
Ext.define('YourApp.override.Container', {
override: 'Ext.Container',
hide: function () {
var me = this;
Ext.each(me.query('field'), function (field) {
field.hide();
});
me.callParent(arguments);
},
show: function () {
var me = this;
Ext.each(me.query('field'), function (field) {
field.show();
});
me.callParent(arguments);
}
});
Related
Code is:
Ext.define("Myapp", {
extend: '',
config: {},
initComponent: function () {},
getGrid: function () {
Ext.create("Ext.grid.Panel", {
...
columns: [
{
header: 'xx',
renderer: function (value) {
return '<a onclick=''>text</a>';
}
}
]
});
},
test: function(){
alert(1);
},
});
In the above code, I want call test function in onclick event. I tried Myapp.test(), But it didn't work.
Is there any way to do this?
You have to add a listener to the cell and check inside the listener function if the user clicked the 'a' tag.
A good example has been made by Tyr
Take a look at this fiddle
ExtJS components working like simple object literals, so you can extend them with anything you want. In this case, i added the property "active" which can be checked in the beforeEdit listener.
I am not very familiar with the CKEDITOR API yet and now I got stuck trying to find the way to create placeholders inside of the CKEDITOR editable area.The expected behaviour for the placeholder - to dissappear on user interaction with it, allowing to edit the content instead.
I know that there is already a placeholder plugin (http://ckeditor.com/addon/placeholder) but its behaviour is not what I am looking for.
To be more specific, the question is: is it possible to subscribe for some events on the particular element inside of the CKEDITOR?
Working in the angular context I am able to compile my html before it is passed to the CKEDITOR ng-model
$scope.html = $compile('<div><span text-placeholder >Placeholder</span></div>')($scope).html();
But then I fail trying to set click events inside of the directive:
.directive('textPlaceholder', [ function () {
return {
restrict: 'A',
link: function ($scope, $element) {
//THIS DOES NOT WORK UNFORTUNATELY
$element.on('click', function () {
console.log('clicked');
})
}
}
}])
Any thoughts?
UPDATE: For now I came up with the solution to implement simple plugin and then reference it in the CKEDITOR config:
(function () {
CKEDITOR.plugins.add('text-placeholder', {
init: function (editor) {
editor.on('key', function (evt) {
var el = $(CKEDITOR.instances.editor1.getSelection().getNative().baseNode.parentElement);
if (el.hasClass('text-placeholder')) {
el.remove();
}
});
}
});
})();
Looks ugly for me. Any feedback is appreciated.
This seems to be a final Solution:
CKEDITOR.plugins.add('text-placeholder', {
init: function (editor) {
editor.on('contentDom', function () {
var editable = editor.editable();
editable.attachListener(editable, 'click', function (event) {
var $placeholder = $(event.data.$.target).closest('.text-placeholder');
if ($placeholder.length > 0) {
var selection = editor.getSelection();
selection.selectElement(selection.getStartElement());
}
});
});
}
});
This applies the selection on the element with "text-placeholder" class when user focuses it inside of the editable area
Update:
See example
You inspired me to write one myself, using the above example as a starting point. In my use case I wanted to take placeholder text from an attribute on the editor -- data-placeholder -- and display it in the editor. When the editor gets focus, the placeholder text disappears. When the editor blurs -- if no user content has been entered -- the placeholder text is displayed again. Additionally, I set a data-placeholder-showing attribute so that I can, for example, use CSS to make the placeholder text gray. Here's my code:
CKEDITOR.plugins.add('text-placeholder', {
init: function (editor) {
var placeholder = editor.element.getAttribute('data-placeholder');
editor.on('contentDom', function () {
if (placeholder) {
editor.setData(placeholder);
editor.element.setAttribute('data-placeholder-showing', true);
}
});
editor.on('focus', function() {
if (editor.getData() === placeholder) {
editor.element.setAttribute('data-placeholder-showing', false);
editor.setData('');
}
});
editor.on('blur', function() {
if (placeholder && editor.getData().length === 0) {
editor.element.setAttribute('data-placeholder-showing', true);
editor.setData(placeholder);
}
});
}
});
I'm using the Kendo UI treeview with Backbone.js along with Marionette.js The treeview is inside a view component and works well execpt for one area. To start, I initialize the treeview when I call the view render method
View.myPanel = Marionette.ItemView.extend(
render: function () {
this.treeview = this.$el.find("#treeview").kendoTreeView({
dataSource: this.hierarchicalDataSource,
dataTextField: ["item"],
dragAndDrop: true,
loadOnDemand: false,
drop: this.onDrop
}).data("kendoTreeView"),
this.treeview.expand(".k-item");
},
onDrop: function (e) {
...
code to create model goes here ......
...
this.saveItem(localModel, false);
}
}
The problem I have is that when I try and call this.saveItem, I have no reference to "this". . Normally "this" would be the view itself.
Instead "this" refers to the treeview object. I see the event object inside the drop handler but no reference to the view.
I tried to extend the treeview with BackBone.Events but that causes me to lose the drag and drop functionality. I also tried passing the view object as a parameter to the drop handler but that replaces the event parameter in the onDrop function.
Underscore's bind and bindAll methods may hep you.
View.myPanel = Marionette.ItemView.extend(
initialize: function() {
_.bindAll(this,'onDrop');
},
render: function () {
this.treeview = this.$el.find("#treeview").kendoTreeView({
dataSource: this.hierarchicalDataSource,
dataTextField: ["item"],
dragAndDrop: true,
loadOnDemand: false,
drop: this.onDrop
}).data("kendoTreeView"),
this.treeview.expand(".k-item");
},
onDrop: function (e) {
...
code to create model goes here ......
...
this.saveItem(localModel, false);
}
}
To know more see _.bind
Here is sample EXAMPLE posted it there on underscore site
var buttonView = {
label : 'underscore',
onClick: function(){ alert('clicked: ' + this.label); },
onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').bind('click', buttonView.onClick);
Here this in callback function buttonView.onClick points correctly to buttonViewand not to the bound DOM element (which is usual).
I know very little about backbone or marionette, but it seems like you can use the ItemView variable you created:
View.myPanel.saveItem(localModel, false);
Update
Have you tried a self-executing function that passes the View object in as a local variable and returns the ItemView object:
View.myPanel = (function(view) {
return Marionette.ItemView.extend(
render: function () {
this.treeview = this.$el.find("#treeview").kendoTreeView({
dataSource: this.hierarchicalDataSource,
dataTextField: ["item"],
dragAndDrop: true,
loadOnDemand: false,
drop: this.onDrop
}).data("kendoTreeView"),
this.treeview.expand(".k-item");
},
onDrop: function (e) {
...
code to create model goes here ......
...
view.myPanel.saveItem(localModel, false);
}
);
})(View);
Kendo UI explicitly sets the context for event handlers to the widget that triggers the event; use a closure to keep access to your view:
render: function () {
var that = this;
this.treeview = this.$el.find("#treeview").kendoTreeView({
dataSource: this.hierarchicalDataSource,
dataTextField: ["item"],
dragAndDrop: true,
loadOnDemand: false,
drop: function (e) {
that.onDrop(e)
}
}).data("kendoTreeView"),
this.treeview.expand(".k-item");
}
I'm developing an application that use Ext.panel.Panel control. This panel has a body and a header. What I need to do is to add a tooltip (just text) to the header of the panel (onlye the header not the body)
I was trying with this:
listeners: {
render: function () {
this.getEl().dom.title = 'my custom tool tip';
}
},
but it works only for the body, not the header. Do you have any idea how to do it? I'm using Ext 4.2.1
Edit:
This is how I'm trying to show the tooltip
Ext.define('XXX.XXX.XXX.MyCustomPanel', {
extend: 'Ext.panel.Panel',
setMyTitle: function() {
var ds = this.getDataSource();
try {
this.setTitle(ds.getCustomTitle());
// Add tooltip where tooltip = ds.getCustomTitle();
} catch (e) {
}
},
Thanks,
Angelo
You can configure attributes for header's underlying HTML element with the autoEl config in the panel's header config:
header: {
autoEl: {
title: 'This is a tooltip'
}
}
Alternatively, if you want to use QuickTips:
header: {
autoEl: {
'data-qtip': 'This is a tooltip'
}
}
Also see this fiddle.
EDIT:
Applying the tooltip after the panel was already rendered (adjusted to your code):
setMyTitle: function() {
var ds = this.getDataSource(),
title = ds.getCustomTitle();
try {
this.setTitle(title);
// again, obviously just one out of the two attributes
this.getHeader().getEl().set({
'title': title,
'data-qtip': title
});
} catch (e) {
}
}
You should create a Ext.tip.ToolTip and assign it to your header:
var tip = Ext.create('Ext.tip.ToolTip', {
target: 'clearButton',
html: 'Press this button to clear the form'
});
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tip.ToolTip
I have a Grid Panel with a toolbar and an context menu.
The toolbar has a edit button and the context menu has a edit menu item.
Both shares the same properties (text, icon and handler)
Ext has something called Action which makes it possible to share functionality etc. between components, but til now I have had no success getting it to work in the MVC architecture
(I am using the new MVC architecture in 4.0)
My Action class looks like this:
Ext.define( 'App.action.EditAction', {
extend: 'Ext.Action',
text: 'Edit',
handler: function()
{
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'icon-edit-user' ,
});
And in my context menu
requires: ['App.action.EditAction'],
initComponent: function()
{
var editUser = new App.action.EditAction();
this.items = [
editUser,
{
// More menuitems
}
...
];
this.callParent(arguments);
When running the code I get "config is undefined" in the console.
Can anyone point out what I am doing wrong?
Thanks in advance,
t
Passing an empty config to your constructor will avoid the error, but have unwanted consequences later because, unfortunately, the base class (Ext.Action) relies on this.initialConfig later on. For example, if you called editUser.getText() it would return undefined instead of the expected 'Edit'.
Another approach is to override your constructor to allow a no-arg invocation and apply your overridden configuration:
Ext.define( 'App.action.EditAction', {
extend: 'Ext.Action',
text: 'Edit',
constructor: function(config)
{
config = Ext.applyIf(config || {}, this);
this.callParent([config]);
},
handler: function()
{
Ext.Msg.alert('Click', 'You did something.');
},
iconCls: 'icon-edit-user' ,
});
As per Ext.Action constructor
constructor : function(config){
this.initialConfig = config;
this.itemId = config.itemId = (config.itemId || config.id || Ext.id());
this.items = [];
}
You must supply config not to get config is undefined exception in the second line (precisely in config.itemId part).
Updating your code as var editUser = new App.action.EditAction({}); should help(passing new empty object as config).
Surely, you could add some properties to the config object too.