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.
Related
I have grid with RowEditing plugin.
Editor has 2 columns: one with combobox and another with disabled textfield.
I need to change textfield value after changing the combobox value.
I have combobox listener:
listeners = {
select: function (combo, records) {
var editorRecord = myGrid.getPlugin('rowEditPlugin').editor.getRecord();
editorRecord.data["SomeCol"] = "SomeValue";
}
}
But value in the textfield does not refresh until another calling of roweditor.
I need just to set text value to the cell, without updating store. And also if I click cancel button of roweditor, I need cell value returning to old one.
Thanks for your time, all replies and all help.
You can change it using the selection model of the grid,something like this :
{
text: 'Type',
dataIndex: 'type',
editor: {
xtype: 'combo',
typeAhead: true,
selectOnTab: true,
displayField:"name",
listeners: {
select: function(combo, records) {
myGrid= this.up('grid');
var selectedModel = this.up('grid').getSelectionModel().getSelection()[0];
//selectedModel.set('dataIndexOfNextCol', "Success");
val = combo.getValue();
if(val == 'type1'){
Ext.getCmp('textFld').setValue("success");
}
else{
Ext.getCmp('textFld').setValue("failure");
}
}
},
{
text: 'Item',
dataIndex: 'item',
editor: {
xtype: 'textfield',
id: 'textFld'
}
}
You have to commit the changes on update.So you can call edit event listener,
listeners: {
edit: function(editor, e) {
e.record.commit();
}
},
For reference , have a look at this DEMO
I'm currently experiencing an issue with the RowEditing plugin, and was not able to find anything relevant in order to help me with it.
I gave a grid using the RowEditing plugin, and was asked to add a row containing a "reset" button. The best choice seemed to be using an actionColumn.
When the row is not in edition mode, there is no problem, the actionColumn handles clicks correctly, and I can do my processing.
But, if the row is in edition mode, then the actionColumn seems to not react at all.
I've tried to use the editor option, but nothing is happening with that. I've tough of using some listeners too, but I can't find any relevant event for this issue.
Any Ideas?
Finally, I've choosen an other way :
{
xtype: 'actioncolumn',
action : 'tarifRowAction',
handler: function (grid, rowIndex, colIndex)
{
console.log("got click handler § ");
me.fireEvent("clickedMAJButton", grid, rowIndex, colIndex);
},
editor:
{
xtype: 'button',
handler: function (grid, rowIndex, colIndex)
{
console.log("got click handler § ");
me.fireEvent("clickedMAJButton", grid, rowIndex, colIndex);
},
},
items: [
{
icon: 'images/image16/modifier.png',
action : 'tarifRowAction',
scope: me
}
]
}
You could achieve your functionality using this approach instead of row editing plugin :
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'edit.png', // Use a URL in the icon config
tooltip: 'Update',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
rec.set("name", "LISA124"); //Here you may have your logic of updating the data with new data
}
},
{
icon: 'reset.png',
tooltip: 'Reset',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Reset " + rec.get('name'));
rec.set("name", rec.raw.name);
}
}
]
}
Have a look at this fiddle
You can use the approach suggested by #Jeff if you wanna stick with your requirements.
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.
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
});
}
}
}
I built a triggerField and when i press at it, i want to have a popup, that is appended to the button in the triggerfield(so when i click anywhere else it shall disappear and it shall pop out up to the button when i click at the button just like a datepicker-popup)
I somehow managed to do something like that with an Ext.window but the offset and postion doesnt match.
This all should be contained in a row editor.
my Code:
new Ext.grid.GridPanel({
store: Store,
region:'center',
height:150,
//minWidth:700,
autoScroll:true,
listeners:{},
plugins:[new Ext.ux.grid.RowEditor()],
tbar: [{
iconCls: 'icon-user-add',
text: ' hinzufügen',
handler: function(){
alert("abc");
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'löschen',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],
columns: [{
header: 'Monate',
dataIndex: 'MONAT',
width: 50,
sortable: true,
editor:
new Ext.form.TriggerField({"id":"EditorMonate",items:[],
"onTriggerClick":function(thiss){
if(!Ext.getCmp("autoWMonate")){
var monate=new Ext.Window({"x":Ext.getCmp("EditorMonate").x,closeAction:"hide",width:275,id:"autoWMonate",layout:"table",layoutConfig: {columns: 10}});
var text;
for(var mon=1;mon<13;mon++){
text=mon;
mon?mon:text="0";
if(mon<10)
text="0"+mon;
monate.items.add(
new Ext.Button({cls:"x-btn",value:parseInt(text),selected:true,"text":text,id:text
}}}));}
} Ext.getCmp("autoWMonate").hidden?Ext.getCmp("autoWMonate").show():Ext.getCmp("autoWMonate").hide();
}})
}
}]
})
Problem sovled with:
{
header: 'WochenTage',
dataIndex: 'WOCHE',
width: 100,
sortable: true,
editor: new Ext.form.TriggerField({
onTriggerClick: function(e) {
if (!this.menu) {
this.menu = new Ext.menu.Menu({
items:[{xtype:"label",text:"1"},{xtype:"label",text:"2"}]
// the items should have event listeners that set the field value accordingly
});
}
// here you would want to sync the items in the menu with the field value (this.getValue())
// before you show the menu -- keep in mind that the menu and its children might not be rendered yet
this.menu.showAt(e.getXY()); // or this.menu.show(this.getEl(), 'tl-bl?');
}
})
}
I did something like this by looking at the code of the date picker and generalizing the idea there - use a menu component for the popup behavior, and put whatever you like as a single component contained by the menu.