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
Related
I'm learning extjs as our application uses it. Right now I've been able to build something like:
blur: function(field, lastValues) {
var vField = field.getValue(),
vFormPanel = field.formPanel;
if (Ext.isEmpty(vField)) {
MsgBox.show({
msgs: [{
type: 'info',
msg: Lang.getCustomFrameworkMessage('Do you want to search google?')
}],
buttons: MsgBox.YESNO,
fn: function(buttonId) {
if (buttonId === "yes") {
var redirect = 'https://google.com'
window.location.href = redirect;
}
}
}
}
}
}
In the above code, when the field is tabbed in and out and is empty, it shows the message box. Instead I want that when the page is loaded, very then the message box should be displayed. How can that be done??
You already used blur event to do your thing. You can use afterrender event to display your message.
It will depend on what are you having in your app/UI but the general idea is just look # the documentation for the event you want to tie in and then add your handler there.
Here is an example app:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert('TEST')
}
}
});
}
});
Here is a demo in Sencha Fiddle
Note: Demo and example is in Sencha ExtJS 5.1
I am new to AngularJS, and I want to create a pdf of a particular div with a button click. Currently I'm having code that works on page load. If I
refresh the page it will automatically download that particular div. But I need the download to happen after the click event. This is
my code. Please help me. I have added necessary scripts of html2canvas etc.
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
}
});
You should create a function in your controller, and add a click event to a button.
Your view:
<input type="submit" ng-click="createPdf()" value="Create PDF"/>
Your controller:
$scope.createPdf = function () {
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
}
});
};
js click event
function myClick() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
html
<input type="submit" id="testhtm2canvas" onclick="myClick()" value="html2"/>
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);
}
});
I would like to reload items in the carousel onPainted() method. So whenever users come the carousel item then we have a fresh list of carousel items. Problem at this point of time (please have a look at the source code), the carousel reloads items, however until I touch the carousel, the first carousel item is blank (or not selected) and no items selected. I would like at least to see the first element to be selected.
So here is the simplified source code:
Ext.define("APN.view.FeaturedCarousel", {
config: {
listeners: {
painted: function(carousel, eOpts) {
var features_url = Ext.getStore("regionalisation").getRegionalisedMenus().feature.url;
this.setCarouselStore(features_url);
}
}
},
initialize: function () {
this.callParent();
var me = this;
var features_url = Ext.getStore("regionalisation").getRegionalisedMenus().feature.url;
this.setCarouselStore(features_url);
},
setCarouselStore: function (features_url) {
var me = this;
Ext.Ajax.request({
url: features_url,
success: function (response) {
me.removeAll();
if (!xml) return;
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [
],
data: xml,
proxy: {
type: 'memory',
reader: {
type: 'xml',
rootProperty: 'xml',
record: 'item'
}
}
});
store.each(function (record) {
var item = Ext.create("Ext.Container", {
html: "some HTML HERE"
});
me.add(item);
});
}
});
}
});
I think you should activate the first item in the carousel once all the items are added. Like this:
store.each(function (record) {
var item = Ext.create("Ext.Container", {
html: "some HTML HERE"
});
me.add(item);
});
me.setActiveItem(0);
This should make the first item selected.
If you want to change the carousel content every time it is activated, use "active" listener. Because "painted" will be called only once and if you want that, then no point in adding a painted event because you are already calling the "setCarouselStore" function in "initialize" method.
I have an action column in my grid which is needed to perform lots of non-trivial operations after click on it. I don't want to use the handler method only to avoid duplicity in my code. I want to handle the click event from the controller method which can be called from more sides.
Here is my definition of action column:
{
header: translator.translate('actions'),
xtype: 'actioncolumn',
width: 50,
items:[{
id : 'detailContactPerson',
icon : '/resources/images/pencil.png',
tooltip: translator.translate('show_detail')
}]
},
But now I don't know how to write the Component query definition to set up listener.
init: function() {
this.control({
'detailContactPerson': {
click: function(obj) {
var contactPerson = obj.up('container').contactPerson;
this.detail(contactPerson);
}
},
Second way I've tried is to call the method of controller directly from handler method. It looks like this:
{
header: translator.translate('actions'),
xtype: 'actioncolumn',
width: 50,
items:[{
id : 'detailContactPerson',
icon : '/resources/images/pencil.png',
handler: function(contactPerson){
Project.controller.contactPerson.detail(contactPerson);
},
tooltip: translator.translate('show_detail')
}
But unfortunately it isn't supported way to call controller method (No method exception raised).
Could someone help me to construct working Component query, or show some example how to call controller method from outside?
try actioncolumn#detailContactPerson
or you can listene to actioncolumn 's click event
see this: http://www.sencha.com/forum/showthread.php?131299-FIXED-EXTJSIV-1767-B3-ActionColumn-bug-and-issues
init: function() {
this.control({
'contact button[action=add]':{
click: this.addRecord
},
'contact button[action=delete]':{
click: function(){this.deleteRecord()}
},
'contact actioncolumn':{
click: this.onAction
}
});
},
onAction: function(view,cell,row,col,e){
//console.log(this.getActioncolumn(),arguments, e.getTarget())
var m = e.getTarget().className.match(/\bicon-(\w+)\b/)
if(m){
//选择该列
this.getGrid().getView().getSelectionModel().select(row,false)
switch(m[1]){
case 'edit':
this.getGrid().getPlugin('rowediting').startEdit({colIdx:col,rowIdx:row})
break;
case 'delete':
var record = this.getGrid().store.getAt(row)
this.deleteRecord([record])
break;
}
}
}
BTW.I prefer to use these to instead of AcionColumn
Ext.ux.grid.column.ActionButtonColumn
Ext.ux.grid.RowActions
I have a better way: add new events on your view where are presents the actioncolumns:
{
xtype:'actioncolumn',
align:'center',
items:[
{
tooltip:'info',
handler:function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//this is the view now
this.fireEvent('edit', this, rec);
},
scope:me
},
....
me.callParent(arguments);
me.addEvents('edit')
then on your controller:
.....
this.control({
'cmp_elenco':{
'edit':function(view,record){//your operations here}
....
I too wanted to handle logic for the actioncolumn in a controller. I am not certain if this is better or worse than simply using one of the other plugins mentioned, however this is how I was able to get it to work.
Things to note:
the id config property in the items array of the actioncolumn
does nothing at all, the icons will still receive a generated id
the items are NOT components, they are simply img elements
you can add an id to the actioncolumn itself to target a specific instance of actioncolumn
each icon (or item in the actioncolumn) is given a class of x-action-col-# where # is an index beginning with 0.
For example, in the columns definition of my grid I have:
header: 'ACTION',
xtype: 'actioncolumn',
id: 'myActionId',
width: 50,
items: [{
icon: 'resources/icons/doThisIcon.png',
tooltip: 'Do THIS'
},{
icon: 'resources/icons/doThatIcon.png',
tooltip: 'Do THAT'
}
]
and in the controller:
init: function(){
this.control({
'actioncolumn#myActionId': {
click: function(grid,cell,row,col,e){
var rec = grid.getStore().getAt(row);
var action = e.target.getAttribute('class');
if (action.indexOf("x-action-col-0") != -1) {
console.log('You chose to do THIS to ' + rec.get('id')); //where id is the name of a dataIndex
}
else if (action.indexOf("x-action-col-1") != -1) {
console.log('You chose to do THAT to ' + rec.get('id'));
}
}
}
}
Using this method, you can place all logic for any given action column in the controller.
Here is a way to avoid declaring the handler (no need to use addEvents, ExtJS 4.1.1) :
Ext.grid.column.Action override :
Ext.grid.column.Action.override({
constructor: function () {
this.callParent(arguments);
Ext.each(this.items, function () {
var handler;
if (this.action) {
handler = this.handler; // save configured handler
this.handler = function (view, rowIdx, colIdx, item, e, record) {
view.up('grid').fireEvent(item.action, record);
handler && handler.apply(this, arguments);
};
}
});
}
});
Action column config :
{
xtype: 'actioncolumn',
items: [{
icon: 'edit.png',
action: 'edit'
}]
}
Controller :
this.control({
'grid': {
edit: function (record) {}
}
});
You can also follow this example http://onephuong.wordpress.com/2011/09/15/data-grid-action-column-in-extjs-4/.