I'm currently working on a project that uses ExtJS.
For this part of the project I had to implement a checkbox column on an existing grid, each row of the grid can have a state determined by record.data.codiceStato.
Here is part of the code:
selectionModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
select: function (sm, idx, rec) {
alert("Look ma!")
}
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
if (record.data.codiceStato == 'RS' || record.data.codiceStato == 'AN' || record.data.codiceStato == 'NP')
return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
else
return '';
}
});
Now, as you can see, I only render the checkbox on certain rows that have a precise state(RS, AN, NP). My problem is that when I click on the header checkbox ALL the rows in the grid get selected, also those ones that are not in the state that should be able to be selected(state different than NP RS AN). Is there any way to fix this? Thank you in advance.
Header Checkbox can be detected using rowIndex.
if (rowIndex != 0) {
if (record.data.codiceStato == 'RS' || record.data.codiceStato == 'AN' || record.data.codiceStato == 'NP') {
return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
}
else {
return '';
}
}
else {
return '';
}
Related
i have done toolpip for compobox list items
listConfig: {
itemTpl: [
'<div data-qtip="{description}">{mydisplayField}</div>'
]
now I'm trying to show tooltip for selected item,current value
i have search many times but I cant can't do to this .
If you have done task like this pleas tell me.
it was so easy
on afterrender
var fieldStore = field.getStore();
Ext.create('Ext.tip.ToolTip', {
target: field,
listeners: {
beforeshow: function updateTipBody(tip) {
var value = field.getValue();
if (!value && value !== 0) {
return false; //not show
}
var record = fieldStore.getById(value);
tip.update(record.get('description'));
}
}
});
I can render individual grid columns using a column renderer like this ;
renderer: function(val, meta) {
if (val === 'i') {
meta.style = "background-color:#86b0f4;";
}else if (val === 'n') {
meta.style = "background-color:#fcd1cc;";
}
return val
},
I would like to use this same idea on grid rows.
Unfortunately the only thing I can come across is something along the lines of :
viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
return record.get("partytype") == 6 ? "row-highlight" : "";
}
},
This requires me to update the CSS file which I do not want to do.
Can I directly manipulate the css value on a grid row in extjs?
The meta parameter in the column renderer has a record property too. You could lookup the relevant value there instead of relying on the cell value parameter and then add a reference to the same method for each column in the configuration.
Avoiding code duplication, the renderer method could be declared anywhere but to keep this example concise I've just used an IIFE / inline declaration.
{
// Ext.grid.Panel
// ...
columns: (function(){
function columnRenderer(cellValue, meta){
var value = meta.record.get('value');
if(value === 'i')
meta.style = 'background-color:#86b0f4;';
else if(value === 'n')
meta.style = 'background-color:#fcd1cc;';
return cellValue;
}
return [
{
text: 'Foo',
dataIndex: 'foo',
renderer: columnRenderer
},
{
text: 'Bar',
dataIndex: 'bar',
renderer: columnRenderer
}
];
})()
}
ยป Fiddle
working on my first extjs project where I have a displayfield, which I populate like so.
var displayfield = this.view.down('#displayfieldAccountPL');
var selectedAccountRecord = accountSummaryDataStore.findRecord('AcctNum', selectedAccountNumber);
var acctPL = selectedAccountRecord.get('CalcPLSett');
displayfield.setValue(acctPL);
here is my setup for displayfield
xtype: 'displayfield',
fieldLabel: 'Account P&L',
//id: 'displayfieldAccountPL',
itemId: 'displayfieldAccountPL',
renderer: function (value) {
var newVal = Ext.util.Format.currency(value, '$ ', 0);
if (value > 0) {
newVal = '<span style="color:green">' + newVal + '</span>';
} else if (value < 0) {
newVal = '<span style="color:red">' + newVal + '</span>';
} else {
newVal = newVal;
}
return newVal;
}
Upon selected a button in my project I want to clear out the displayfield.
The problem is, when I set the value to BLANK, I think it is overwriting the store. I think this because I have the store linked to a grid, and the grid row columns are blanked out after I hit the button.
I think what is occurring is two way binding but all I am trying to do is blank out the displayfield.
var displayfieldPL = this.view.down('#displayfieldAccountPL');
displayfieldPL.setValue('');
any ideas on what I am doing wrong?
Is there an easy way to remove text from a displayfield?
I have been successfully rendering conditional statement on normal grid column
{
header: ' ',
dataIndex: 'status_b2',
menuDisabled: true,
flex: 1,
sortable: false,
renderer : function(value, meta) {
var status = value.split("<br/>")[0];
if (status == "Unset Price"){
meta.style = "background-color:pink;";
}
else if (status == "Available"){
meta.style = "background-color:green;";
}else if (status == "Booked Unpaid"){
meta.style = "background-color:yellow;";
}else if (status == "Booked Paid"){
meta.style = "background-color:orange;";
}else if (status == "Checked In"){
meta.style = "background-color:red;";
}else if (status == "Checked Out"){
meta.style = "background-color:purple;";
}
return value;
}
My question is how to render with conditional logic on templatecolumn grid? If the room_status == "Dirty", I want to add background-color as red.
{
text: 'Room List',
xtype: 'templatecolumn',
tpl: 'ROOM {room_number} <br/> {room_type_name} <br/> {bed_type} | {room_status}',
menuDisabled: true,
flex: 1,
sortable: false
}
follow these links sencha forum and stackoverflow link
We can have some inline functions and call them. Follow this link. Implement your logic inside these functions.
I too am used to using renderers to add styles to cells to give them highlighting. Effectively, templatecolumn already has a renderer that is applied by default, and it works by basically returning the template applied to the record. So if you want to use your own renderer, you could either replicate the two lines of code from the defaultRenderer, or just call the column's defaultRenderer directly:
function customRenderer(value, metaData, record, rowIndex, colIndex, store, view)
{
if (record.get('severity') == 'critical')
{
metaData.tdCls += ' redHighlight';
}
return view.panel.columns[colIndex].defaultRenderer(value, metaData, record);
};
I am having some problems with my code that I hoped you could help me with as I've kind of hit a wall.
I have a field in a Tree grid that has the following properties:
xtype : 'gridcolumn',
id : 'raGridFormulaLink_Purchased',
dataIndex: 'formulaLink',
groupable : false,
editor : {
xtype: 'textfield'
},
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var rVal; var linkRec;
if(value !== '' && value !== 0) {
/* TODO Find linked Record based on ['child_id' => value]
* and print that record's [text] to rVal */
rVal = Ext.local.langstore[448] + ' ' + value;
}
return rVal;
},
align: 'left',
width: 100
As you can see I am trying to do a simple HLOOKUP to find the linked record. But I am unable to get the proper record from the store. How can I do this?
The value has the right "child_id", so it's not the input that's wrong.
Any help appreciated,
GR.
Solved it.
Final code:
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var rVal; var rText = ''; var node;
if(value !== '' && value !== 0) {
if(record.isLeaf()) {
var node = record.parentNode.findChild('child_id',value);
rText = node.data.text;
rVal = Ext.local.langstore[448] + ' ' + rText;
}
}
return rVal;
},