{
icon: 'images/delete.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var edit = Ext.create('AM.view.user.Uploadfile').show();
//here I want to pass parameters to get in window panel
}
}
The code that I have written and want the parameter to be passed like the row id where the icon is clicked on window panel.
If you look at the API you will see that the handler has the arguments
view : The owning TableView.
rowIndex : The row index clicked on.
colIndex : The column index clicked on.
item : The clicked item (or this Column if multiple items were not configured).
e : The click event.
record : The Record underlying the clicked row
Where the last one is interesting for you. So you can do it like so
handler: function(grid, rowIndex, colIndex, item, e , record) {
var win = Ext.create('Ext.window.Window', {
autoShow: true,
html: record.data.firstname + ' ' + record.data.lastname
});
}
And here is a working JSFiddle
It is a button on a actioncolumn. To pass the Id to a window you can retrieve the row data by getting it from the record parameter.
columns: [
{ text: 'Id', dataIndex: 'Id', width: 50 },
{
xtype: 'actioncolumn',
width: 100,
text: 'Delete',
align: 'center',
items: [{
icon: '../images/delete.png',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex, item, e, record) {
myWin.id = record.data.Id; //where myWin is a reference to the window object and id is just a config.
}
}]
}
]
Related
I am trying to create a grid using extjs 4.2.2. The grid contains several rows, if I click one row, then pops up another page which displays the detail info of that row.
The grid is in a panel, so the view code is:
Ext.define("Application.view.foo.Panel", {
extend: "Ext.panel.Panel",
cls: 'foo.panel'
...
items: [
{
itemId: "foo-bar",
xtype: "grid",
...
,selType: 'checkboxmodel'
,columns: [
xtype: 'templatecolumn'
and the code of listening row select event in controller is like:
"panel[cls~=foo.panel] #foo-bar": {
select: function(selectionModel, record, index) { .... }
Now, I am going to add check box for each row in order to mass edit, I added selType: 'checkboxmodel', but the problem is that I cannot click the check box: if I click the box, it goes the the detail page, not just being 'checked', cuz the code in controller listens that 'row click' event.
Is there any suggestions to implement it? Thanks in advance.
I would suggest to change your row click listener to view row details with action column.
{
xtype:'actioncolumn',
width:50,
items: [{
// Url is just for example (not working)
icon: 'extjs/examples/shared/icons/fam/showDetails.png', // Use a URL in the icon config
tooltip: 'Show details',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
// do your functionality here...
}
}
In every row will appear an icon, and then you will have possibility to multiselect rows and to look details of every row as well. Hope that helps.
Try to listen on cellclick event instead.
cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
if(cellIndex != your_checkbox_column) {
//do your info page stuff here
}
}
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 created two tab panels and each panel has a grid.
Listener for Grid A:
Ext.getCmp('AGrid').addListener("rowcontextmenu", function menus(grid, rowIndex, e) {
if (!grid.contextMenu) {
grid.contextMenu = new Ext.menu.Menu({
autoDestroy: false,
items: [{ id: 'view', text: 'View Content'}],
currentRowIndex: rowIndex,
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'view':
viewEmailClick(grid.getStore().getAt(this.currentRowIndex).data);
break;
}
}
}
});
}
this.contextMenu.currentRowIndex = rowIndex;
e.stopEvent(); // this stops the browser context menu and allows the default grid
// show the row context menu here
this.contextMenu.showAt(e.xy);
});
Listener for Grid B:
Ext.getCmp('BGrid').addListener("rowcontextmenu", function menus(grid, rowIndex, e) {
if (!grid.contextMenu) {
grid.contextMenu = new Ext.menu.Menu({
autoDestroy: false,
items: [{ id: 'view', text: 'View Task'}],
currentRowIndex: rowIndex,
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'view':
viewTicketClick(grid.getStore().getAt(this.currentRowIndex).data);
break;
}
}
}
});
}
this.contextMenu.currentRowIndex = rowIndex;
e.stopEvent(); // this stops the browser context menu and allows the default grid
// show the row context menu here
this.contextMenu.showAt(e.xy);
});
When I right click on it Grid A works fine, and then right click on Grid B rowcontext menu is not working (just shows small gray dot).
After I turn back to Grid A and right click, it shows two rowcontext menus on Grid A:
If I right click on B grid and A grid right click (nothing shows) after turn back to B grid
it show rowcontext menu which contains two lists (reverse order) on Grid B.
Why this kind of things happen?
How can I show properly each grid row context menu?
It seems you pass the same grid variable to both listeners.
This problem is caused by parameter grid or grid.contextmenu obviously.
I found the answer.
The problem is caused by the follwing line.
items: [{ id: 'view', text: 'View Task'}]
I used same context menu id 'view'.
After those name changed like the followings
items: [{ id: 'viewTask', text: 'View Task'}]
items: [{ id: 'viewContent', text: 'View Content'}]
it works perfect.
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.