I have actioncolumn something like this:
{
xtype: 'actioncolumn',
align: 'center',
items: [
{
getTip: function () {
return 'this doesn\'t work';
},
handler: function() {
// action 1
}
},{
tooltip: 'works',
handler: function() {
// action 2
}
}
]
}
getTip() method I found in documentation, but it doesn't work or I don't know how to use it. What I am doing wrong or how can I set tooltip?
Seems like it is bug with getTip() as bjornd said, but I succeeded to add tooltip that's not the best way I think, but it works for me.
{
xtype: 'actioncolumn',
align: 'center',
items: [
{
getClass: function(value,meta,record,rowIx,colIx, store) {
this.items[0].tooltip = 'working ' + record('name');
return 'some-class-name'; // or something if needed
},
handler: function() {
// action 1
}
},{
tooltip: 'works',
handler: function() {
// action 2
}
}
]
}
If someone can suggest better solution I would be glad to hear.
I have used
getTip : function(value, metaData, record){
return this.getCheckOutCheckInToolTip(record);
},
it works
As stated in the comments for the items property:
getTip option doesn't seem working. I've declared a function :
getTip:function( value, metadata, record ) {
if( !record.get( 'editable' ) )
return 'Record is locked';
return 'Delete record';
}
and no tip appears on mouseover. The result code in Firebug is :
<td class=" x-grid-cell x-grid-cell-btn-timesheet-delete x-action-col-cell x-grid-cell-last"><div style="text-align: left; ;" class="x-grid-cell-inner "><img class="x-action-col-icon x-action-col-0 timesheet-option-icon-delete" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt=""></div></td>
So, no data-qtip property.
So I think this is a known issue. You can wait for the update or fix it by yourself with some override.
Related
Extjs binding value not getting cleared when the user clears the date field box manually ( user changes date field to blank )
I cannot post the code but i found a similar fiddle
In this fiddle i want the value to be cleared when i clear the datefield manually , instead what is happening is the display field keeps showing the old value
it would be great help if some one could provide me the solution
You could use specialkey event for the datefield to achieve the required result.
You can check here with working fiddle.
Note you can put your logic based on your requirement. I have just create simple example.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
viewModel: {
data: {
dateFrom: null,
}
},
items: [{
xtype: 'datefield',
emptyText: 'Date From',
bind: '{dateFrom}',
listeners: {
specialkey: function (field, e) {
if (e.getKey() == e.DELETE || e.getKey() == e.BACKSPACE) {
field.up('panel').getViewModel().set('dateFrom', null);
}
}
}
}, {
xtype: 'displayfield',
bind: {
value: '{dateFrom}'
}
}]
});
}
});
Help me with my code. It returns [object Object]. how can I return it as button
{
xtype: 'gridcolumn',
width: 100,
header: 'Apply Action',
dataIndex: 'Test',
sortable: false,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
var hasAutoAction = record.data.autoActions;
if(hasAutoAction.length == 0){
return '';
}
return '<input type="button" onClick="buttonclick(event)" id="btn" value="Apply"/>'
var buttonclick = function (event) {
alert('Clicked')
}
}
Please have a look at widgetcolumn, which should do exactly what you want, but the ExtJS way:
xtype:'widgetcolumn',
widget:{
xtype:'button',
handler:function(btn) {
Ext.Msg.alert('Clicked','Clacked');
}
}
You can not return object in this way and therefore you getting this error. Anyway as per my understanding you wanted button in grid and and then display something on click of button. For that you don't need to write in renderer. In your previous code also you were trying to return button where button was object which is invalid.
You can change you code design and place button either in tbar or bbar.
Sample code :
bbar: [
{ xtype: 'button',
text: 'Button 1',
handler: function() {
alert('You clicked the button!');
}
}
],
I created a Fiddle for you. Try this and understand. It will work.
In my project, I am trying to change the background color of all the panels inside a container. The code which I am trying is as follows:
container --> panel (don't change) --> panel (Change)
//Generated dynamically using for loop.
listeners: {
'render': function(panel) {
panel.body.on('click', function() {
//here change the background color of all the panels inside the container>panel.
});
}
}
What should I write to change the background color of the only panels which are present inside the parent panels of a main container?
I tried:
Ext.each('panel',function(){this.body.setStyle('background','white')}),
But the above approach is giving me the following error:
Uncaught TypeError: Cannot call method 'setStyle' of undefined
EDIT:
Here, I am looking for a method of extjs which quite do the same work as jQuery's children().
$('#containerID').children('panel').children('panel').css(change background color);
Based on your requirements you will always have a sum of 9 components you are looking at -1 the you start from. The shortest way is to use the each() method of the MixedCollection (at runtime all items are within a MixedCollection)
'render': function(panel) {
panel.body.on('click', function() {
panel.items.each(function(p){ p.body.setStyle('background','white'); }, this)
},this);
}
This may not be the variant with the best performance but knowing your requirement from the last question I can say that this is the easiest. And in addition it will be easy to maintain. And read the article about delegates that I posted in the comments of the last question!
I hope there is now typo, cause it is untested
Update
Well, you are looking for the ownerCt property here (at least that is the easiest way). But there are some mightier navigation methods up() / down() both can be feeded with a ComponentQuery string. Leave the up() arguments empty will return the immediate owner/activater (basically the same as ownerCt).
Following a working example:
var childItems = [], items = [];
for (i = 0; i < 9; ++i) {
childItems.push({
xtype: 'container',
width: 50,
height: 50,
html: i + '',
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
listeners: {
'afterrender': function(panel) {
panel.el.on('click', function(e,t) {
panel.el.on('click', function(e,t) {
panel.el.setStyle('background','red');
panel.ownerCt.items.each(function(p){ if(panel.el.id != p.id) p.el.setStyle('background','white'); })
});
}
}
});
}
for (i = 0; i < 9; ++i) {
items.push({
xtype: 'container',
layout: {
type: 'table',
columns: 3
},
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
items: childItems
});
}
Ext.create('Ext.container.Container', {
layout: {
type: 'table',
// The total column count must be specified here
columns: 3
},
renderTo: Ext.getBody(),
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px', margin: '30px'},
items: items
});
Update 2
To reset all try this (untested)
'afterrender': function(panel) {
panel.el.on('click', function(e,t) {
panel.el.setStyle('background','red');
panel.ownerCt.ownerCt.items.each(function(op){
op.items.each(function(p){
if(panel.el.id != p.id)
p.el.setStyle('background','white');
})
}, this)
});
}
JSFiddle
I need to add a click event on a link inside the grid, how's that working?
This is my grid:
Ext.define('AM.view.advertiser.List', {
extend:'Ext.grid.Panel',
alias:'widget.advertiserlist',
title:'All Advertisers',
store:'Advertisers',
columns: [
{
xtype:'gridcolumn',
dataIndex:'clientname',
text:'Clientname',
width: 200,
renderer: function(val) {
return ''+ val +'';
}
}]
});
Here is how I hacked the same exact situation, but I wanted controller to respond to the click events and I needed to extract info after the hashmark:
'myView gridpanel[ref=myGrid]':{
itemclick : function(view, model, row, rowindex, event) {
var hash = event.getTarget().hash;
if (!hash && event.getTarget().parentNode) {
hash = event.getTarget().parentNode.hash
}
if(hash) {
console.log("Control: "+hash);
//do something with the hash -> #{mydata}
}
}
}
xtype:'gridcolumn',
dataIndex:'clientname',
text:'Clientname',
width: 200,
autoEl:{
tag: 'a',
href: '',
onClick: 'nameYouFunction',
//Any methods to add here
}
You can use the following event:
http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.grid.Panel-event-cellclick
And after that, you can use parameters of the event to make it work as you want
I'm making an ExtJS Component, and I want it to use a QuickTips tooltip. If I make an element using DomHelper, I can set a tooltip, no sweat. If, however, I make a Component, like
new BoxComponent({
qtip: "This is a tip"
});
nothing happens. I've also tried naming the property "tooltip", but no luck. Is there a right way to do this? The hack I have in place now that works is
new BoxComponent({
qtip: "This is a tip",
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
I feel like that can't be right. I guess I could just extend Component to do that automatically, but it seems like a common enough case that I should be able to do it without poking under the hood like this.
In ExtJS 4.2.1, I am able to add a tip to a checkbox this way:
new Ext.form.field.Checkbox({
...
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
});
I think you're doing it absolutely right. I really don't see the need for QuickTips in arbitrary Components, particularly in Containers, since that might lead to multiple tooltips within the same Component.
It should work :
new BoxComponent({
tooltip: new Ext.ToolTip({
title: 'Example Tooltip title',
text: 'Example Tooltip text'
}),
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
Hrm. I took a look at how Ext.Button does it, with passing tooltip to the configuration calling setTooltip under the hood.
Untested, but I think your best bet is something like:
Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
// setTooltip code adapted from Ext.Button, looking at tooltip property
});
});
I think this is the best way in Extjs 4:
you should add an afterrender listener, then when yor componenten is already created you can add the tooltip, this way:
listeners : {
afterrender : function(obj) {
if (this.max != null && this.ave != null && this.min != null) {
obj.tip = Ext.create('Ext.tip.ToolTip', {
target : obj.getEl().getAttribute("id"),
trackMouse : true,
renderTo : document.body,
html : this.htmlTip,
title : this.title
});
}
}
}
I hope it helps.
Simplest way is to set 'data-qtip' attribute on the main element of the component:
{
xtype: 'box',
autoEl: {
'data-qtip': "Tooltip text"
}
}
Make sure to enable qtips on application startup:
Ext.tip.QuickTipManager.init();
I always use this way in ExtJs 3
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c,
text: 'Enter \'-1\' for a 1 time only'
});
}
}
This way works perfect! Try it! (Extjs 4.2)
var boxComponent = Ext.create('Ext.Component', {
id: 'id111',
html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
width: 20,
height: 20,
margin: '0 0 0 10'
});
Ext.tip.QuickTipManager.init();
Ext.tip.QuickTipManager.register({
target: 'id111',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});
{
xtype: 'checkbox',
fieldLabel: 'Test Label',
name: 'data_field',
autoEl: {
tag: 'div',
'data-qtip': 'This is a tip'
}
}
{
xtype: 'checkbox',
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
}
}