I have a problem for hide/remove action column Item on record condition in grid view.
let see bellow code. there is action column code I did. I want to hide delete Icon shown in image. this delete icon hide/remove on record condition.
{
xtype: 'actioncolumn',
flex: 1,
align: 'center',
scope: this,
renderer: function (n, t, rec) {
/* if (rec.get('companyId') == 23) {
console.log('Distributor Account List');
}
else {
console.log('Distributor Client user List');
} */
},
items: [
{
icon: FLEET_SERVER_URL + 'images/edit2.png',
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_EDIT_'),
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
this.fireEvent('showUserDetails', rec);
}
},
{
xtype: 'spacer'
},
{
icon: (Ext.getStore('userStore').first().get('issuperadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 1 || Ext.getStore('userStore').first().get('isadmin') == 3) ?
FLEET_SERVER_URL + 'images/vehicles/van-icon.png' : '', // Use a URL in the icon config
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_VEHICLE_'),
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
this.fireEvent('assignvehicles', rec);
}
},
{
xtype: 'spacer'
},
{
icon: FLEET_SERVER_URL + 'images/del.png',
tooltip: fleet.Language.get('_FLEET_USER_USERLIST_DELETE_'),
handler: function (grid, rowIndex, colIndex) {
Me = this;
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.show({
title: fleet.Language.get('_FLEET_USER_USERLIST_REMOVETITLE_'),
msg: fleet.Language.get('_FLEET_USER_USERLIST_REMOVEMSG_'),
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
callback: function (button) {
if (button == fleet.Language.get('_FLEET_USER_USERLIST_YESBTN_')) {
Me.removeUser(rec);
}
}
});
}
}
]
}
There are 4 items in action column (Edit icon, spacer, spacer, and delete Icon) please see Attached image.
In above code there is Action column render event. e.g. I want to check record having company ID=23. I use this condition for testing. Main problem is that I want to hide that delete Icon on condition. Any proper solution for this?
What you want to do is not use the icon property, but you want to put the icons into the corresponding CSS in a class. E.g.
.someIcon {
background-image: path/to/icon.png no-repeat center center !important;
width:20px;
height:20px;
}
and then you can add a getClass config instead of the icon config, and provide the CSS classes as needed, e.g. if you want to switch icon on or off:
getClass: function(v, meta, rec) {
if(rec.get('companyId')==23) return 'someIcon';
else return '';
}
or, if you want to have different icons, e.g.:
getClass: function(v, meta, rec) {
if(rec.get('isImportant')) return 'redIcon';
else return 'greyIcon';
}
Please note that you have to recompile your project in Sencha Cmd if you add classes through SCSS.
Related
The title says much about it. I will pass you an example below:
let scalesField = {
xtype: 'combo',
name: property.name + 'scale',
listeners: {
change: function (combo, selectedValue) {
// here would be some logic
// Tried with:
Ext.Array.each(possibleValues, function (single, index) {
possibleValues[index].disabled = true;
if (possibleValues[index].scale_id === selectedValue) {
possibleValues[index].disabled = false;
}
});
}
}
};
if (possible_values.length > 0) {
Ext.Array.each(possible_values, function (single, index) {
fields.push({
xtype: 'checkboxfield',
fieldLabel: possible_values[index].name,
name: possible_values[index].name,
labelWidth: 100,
});
});
}
Variable 'possible_values' contain all possible checkboxes as are defined in the 'if' block. I want to disable or enable checkboxes depending on what option user choose in combo(select option dropdown).
After running code as below I can see in the console that property disabled is changed but it does not apply to a view.
How to solve this in ExtJS?
You can use it like below:-
Ext.ComponentQuery.query('checkboxfield[name=' + possibleValues[index].name + ']')[0].setDisabled(true /*/false*/ );
I have an application showing two datatables. Both tables use the button extension to support a column visibility dialog.
The second table has a first column without title. In the column visibility Dialog the button should have a title, that is why i override the columnText function of the colvis extension
var buttons= [{
extend: 'colvis',
postfixButtons: ['colvisRestore'],
collectionLayout: 'fixed three-column'
}];
if("secondTable" === tableName) {
buttons[0]['columnText'] = function (dt, idx, title) {
if (idx === 0) {
return "firstColumnTitle";
} else {
return title;
}
};
//add default buttons to buttons
buttons[0]['buttons'] = [{extend: 'columnsToggle'}];
//add one extra button to the collection
buttons[0]['buttons'].push([
{
extend: 'columnToggle',
text: 'HR',
columns: [1, 2]
}]);
}
DataTable({
rowId: 'id',
ajax: 'content.do',
buttons: buttons
});
I would expect to have the columntext function called for second table only
if i add buttons the columnText function is no longer called. Why?
Thanks to the comments above #davidkonrad and #Adelin. If found the reason.
instead of assigning the columnText function to the colvis extension, i need to assign it to the columnsToggle Extension inside.
if("secondTable" === tableName) {
//add default buttons to buttons
buttons[0]['buttons'] = [{
extend: 'columnsToggle',
columnText: function (dt, idx, title) {
if (idx === 0) {
return "firstColumnTitle";
} else {
return title;
}
}}];
//add one extra button to the collection
buttons[0]['buttons'].push([
{
extend: 'columnToggle',
text: 'HR',
columns: [1, 2]
}]);
}
I am using Bootstrap Table with the Editable plugin. I have a button to add new rows to the table. I like to have the cell for the new row in the Notes column have a background color of blue.
From the documentation:
function cellStyle(value, row, index, field) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
The only thing that is consistent with those parameters and adding a new row is the index = 0, so I default all the others to Null. It seems like my function is not even being called. I'm new to JavaSript so I might just be missing something.
http://jsfiddle.net/8gk0ogtp/1/
$button = $('#button');
$(function () {
$button.click(function () {
$table.bootstrapTable('insertRow', {
index: 0,
row: {}
});
cellStyle();
});
});
function cellStyle1(value=Null, row=Null, index=0, field=Null) {
return {css: {"background-color": "blue"}}
}
Try this one
http://jsfiddle.net/bitriddler/qjht8stb/
Changes:
When adding new rows I added paintBlue=true
Updated cellStyle to this
function cellStyle(value=Null, row=Null, index=0, field=Null) {
if(row.paintBlue) {
return {css: {"background-color": "blue"}}
}
return {};
}
Passing cellStyle function when defining columns instead of passing in html data-cell-style attribute
...
{
field: 'Notes',
sortable: 'true',
cellStyle: cellStyle,
title: 'Notes',
editable: {
type: 'textarea'
}
...
Currently, I am populating the data for my grid using XML file.
My XML file is something like this
<property>
<category>Email</category>
<name>To-address</name>
<value>abc#xyz.com</value>
</property>
<property>
<category>Email</category>
<name>From-address</name>
<value>abc#xyz.com</value>
</property>
<property>
<category>Email</category>
<name>Email-body</name>
<value>My Body</value>
</property>
<property>
<category>Email</category>
<name>Password</name>
<value>1234</value>
</property>
And I am populating my grid like this:
{
xtype: 'grid',
columns: [{
text: 'Name',
width: 100,
dataIndex: 'name'
}, {
text: 'Value',
dataIndex: 'value',
flex: 1,
getEditor: function(record) {
if (record.get('name') === 'password') {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.Text', {
inputType: 'password'
})
})
else if (record.get('name') === 'Content') {
return Ext.create('Ext.grid.column.Action', {
width: 50,
items: [{
iconCls: 'x-fa fa-cog',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
alert('Hello World');
}
}]
});
} else {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.Text', {})
})
},
renderer: function(value, meta, rec) {
if (record.get('name') === 'password') {
value = '***';
}
return value;
}
}
}
],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
}
}
}
I want to add a button to the Content row as value, which will be going to pop up a window to add email body to the user on click.
This is what I tried. It is able to add a button with handler working fine, but it is hiding other grid value column data
if (record.get('name') === 'Content') {
var id = Ext.id();
Ext.defer(function() {
Ext.widget('button', {
renderTo: id,
text: 'Edit',
width: 100,
handler: function(record) {
alert("Hello world");
}
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
As a preliminary step, I want to check an alert box for the action column I am adding the content. But it is not showing up in the row.
What I am missing here to add a button to the grid row?
An editor is defined on a column, in your case, the column is of type gridcolumn (the default column type) and implicitly defined through
text: 'Value',
dataIndex: 'value',
flex: 1,
The function getEditor() of a column should return an editor component with a field derived from Ext.form.field.Base.
However, you are sometimes returning a column component from the getEditor:
getEditor: function(record){
...
else if(record.get('name') === 'Content') {
return Ext.create('Ext.grid.column.Action', {
...
This cannot work because it is the wrong component type. Also, your column has a fixed type and you cannot get a single cell of the column to behave like a different column type, except by manually overriding the renderer. I don't see a quick fix for this. You could possibly return an editor with a textfield with a trigger button inside.
However, I would recommend that you use a form for your data, which is far more suitable. In that form, you can place buttons wherever you want.
I want to do Lock/Unlock icon button by using Renderer. If clicking the button, it will show message box yes/no to confirm. If click Yes, it should call SubmitValue function. The problem is it cannot call javascript SubmitValue function. How do I call function when click Yes confirm box?
Renderer.js
var renderLock = function (value, p, record) {
if (JSON.parse(value))
{
return '<img src="Images/icon/lock.png" >';
}
else
{
return '<img src="Images/icon/unlock.png" >';
}
}
Common.js
var GetGrid_LockButton = function (Active, FieldId, FieldName, Grid_Name, URL) {
return {
menuDisabled: true
, sortable: false
, hidden: Permit_No_Del
, text: 'Lock'
, renderer: renderLock
, align: 'center'
, xtype: 'actioncolumn'
, dataIndex: 'IS_LOCK'
, width: 45
, listeners: {
click: function () {
Ext.MessageBox.confirm('confirm?', function (btn) {
if (btn == "yes") {
SubmitValue(URL, { id: rec.get(FieldId) }, "Ext.getCmp('" + Grid_Name + "').getStore().load();", "Yes");
}
});
}
}
};
}
Thank you in advance.
I think you are possibly having problems with scope, notice the 'this' keyword added as the last param in the modified version of your confirm call below
Ext.MessageBox.confirm('confirm?', function (btn) {
if (btn == "yes") {
SubmitValue(URL, { id: rec.get(FieldId) }, "Ext.getCmp('" + Grid_Name + "').getStore().load();", "Yes");
}
},this);
By default, the scope in a confirm call is defaulted to the browser window object and so I imagine at that level your SubmitValue function is not accessible.