Hi everyone i got the following issue, i have a GridPanel with a RowEditor Nevertheless it doesnt validate my fields when it renders
But if i focus all my fields to edit and refresh the grid its just appear as i would like them in the first place
Can you suggest me something? Thanks!!
RowEditor uses Ext.form package components such as: "TextField" "DateField" "ComboBox" and so on... And validations are performed by them. Grid does't have such feature to validate. Validation feature may be achieved by renderer config option of column. For example, your Description column config might be looked like this:
{
header : 'Description',
dataIndex : 'description',
renderer :function(description, metaData){
if(!description){
//if description is blank let background of it be red.
medaData.style+="background-color:red;"; //or whatever css can be applied
}
return description;
}
}
Related
I am new to ExtJs ,In this I have a textareafield binding data from API response.
What I want to do is if the response has any url's in it I would like to show a tool tip kind of thing with copy option when user hover on it.Can anyone help me to get this .
code:
xtype: 'textareafield',
fieldLabel: 'Reponse',
name: 'response',
align: 'stretch',
allowBlank: false,
flex: 1
response.setValue(StringUtils.addHtmlBreaks(record.get('response')));
Thanks..
I have created simple fiddle where I have shown one textarea and binded mouse events and shown tip accordingly in this fiddle.
textarea.on('mouseover',function(evt,field){
//Show tip if url matches
},this);
textarea.on('mouseout',function(){
//just hide tip
},this);
and matched url in textarea by text.match(/\bhttps?:\/\/\S+/gi)
In this fiddle I haven't implemented copy thing because I want to confirm if this behavior fits for you. Please check and reply for same, and in case of any edits in code suggest same.
tooltip: dizionario.traduci("${GRCLI_SW_T_PERIODO}"),
This is my Sample Code, I am using Extjs 3.4.0 am trying to update the tooltip of grid column on runtime, I am using column.tooltip = "abc" it changes the tooltip config but on mouse hover I am not able to see updated tooltip
The case is normal and easy. Actually, if you change the tooltip from tooltip config of extjs you need to refresh your DOM
You just need to get grid first and then you get the column on which you want to change the tooltip.
Code:
gridColumn.tooltip = "updatedTooltip";
Then for refresh DOM you just do:
gridPanel.getView().updateHeaders();
Thank You :)
Very simple scenario: I want to have a small grid for a good overview. But when clicking in a cell the editor should have a higher width than the actual column.
Example:
https://fiddle.sencha.com/#fiddle/reg&view/editor
I tried to specify the width and I tried to add it in the afterrender. Width is always exactly as wide as the column. Same problem with textareas.
editor: {
xtype: 'textfield',
enableKeyEvents: true,
selectOnFocus: true,
width: 500,
listeners: {
afterrender: function (field) {
field.setWidth(500);
}
}
}
I thought this should be easy but I couldn't find a way to accomplish that. I can specify the height on a textarea but the width isn't considered.
Check below fiddle.
https://fiddle.sencha.com/#fiddle/27bv&view/editor
Here I have done change for setting width of table node in which cell editor is rendered by Ext.get(Ext.get(Ext.query('div.x-grid-editor')[0]).dom.childNodes[0]).setWidth(300).
This approach is having one limitation- for first time width is not getting set as in beforeedit event we do not get instance of editor.If we get this instance we can apply similar logic for setting editor's width.
please check if it could solve your issue or not.Also let me know for any changes.
Note: I have impl. this thing for first column only.
Okay, I figured out a solution which is pretty close to mine.
afterrender: function (field) {
field.bodyEl.setWidth(500);
}
This works for textareas and textfields with Ext version 5. I found out that in my fiddle I also used the wrong Ext version. Seems not to work with Ext 4.
https://fiddle.sencha.com/#fiddle/27cc&view/editor
I need to create a Alert in Extjs plain with a text , but when we use Ext Message Box we get a header with close option and buttons. Please help me to alert the user only with a text message and should fade off after some seconds by default.
Have a toast! It's available since ExtJS 5.
Use header: false to hide the header. The autoCloseDelay is set in milliseconds, and defaults to 3000.
Example:
Ext.toast({html: 'Some alert here.', header: false, autoCloseDelay: 5000});
Edit: For centering the toast in ExtJS 6 and 5, see this fiddle:
https://fiddle.sencha.com/#fiddle/12ua
Instead of centering a toast (since you will need to do more hacking to not break toast like the other answer), why not extend Ext.window.MessageBox and handle it yourself? It does everything you want except it shows a header. Here's a fiddle example: https://fiddle.sencha.com/#fiddle/12ue
So now all you have to do is use it like:
Ux.Msg.alert('Welcome to Sencha Fiddle!');
In my grid I would like to retain the grouping feature along with a groupHeaderTpl (Currently showing some custom text in the headers) , but I want to hide the [+/-] button from the header.
I tried it with CSS styles but without success. Can somebody help me to achieve this?
Implement the collapsible property like this
features: [{ftype:'grouping', collapsible : false}]