I am a newbie to ExtJS.I am now working on grids.I would like to toggle the visibility of the headers on a button click(Show and hide the header only).Any suggestions should be appreciated.Thanks in advance.
I would try
var el = myDataGrid.headerCt.getEl();
if (el.isVisible()) {
el.hide();
} else {
el.show();
}
If you want to hide all headers in all grids, I suggest you assign them some custom class and then you do the above for all of them separatelly.
Something along the following lines (not tested)
var allGrids = Ext.dom.Query.select(".myDataGrids");
Ext.Array.each(allGrids, function(gridDomElement, index) {
var el = Ext.fly(gridDomElement);
// Do the above
// ....
});
Related
I am using ExtJS 5. I have a dynamic grid meaning the column configurations, store fields, data etc are all coming from the backend.
Before I reconfigure the grid with the columns, I try to add a tooltip to the header using the data-qtip attribute but this does not work.
Here is the fiddle:
https://fiddle.sencha.com/#fiddle/1fr8
Snippet:
var cols = data_1.metaData.columns;
for(var i=0;i<cols.length;i++){
cols[i].header = "<font data-qtip='"+cols[i].header+"'>"+cols[i].header+"</font>";
}
grid.reconfigure(null, cols);
store.getProxy().data =data_1.data;
store.loadPage(1)
grid.getView().refresh();
Thanks!
Please don't overcomplicate things, the gridcolumn has a tooltip configuration which should work.
for(var i=0;i<cols.length;i++){
cols[i].tooltip = cols[i].header;
}
It doesn't work in your case, because the QuickTipManager has to be initialized first in Ext.onReady:
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = ...
Please note that the header config in gridcolumn has been deprecated in favor of the text config.
You can also override initRenderData to set this application-wide. For example to always use the column text as a tooltip:
/**
* If a tooltip has not been set for a column header
* then always default to the column name
**/
Ext.override(Ext.grid.column.Column, {
initRenderData: function () {
var me = this;
if (Ext.isEmpty(me.tooltip)) {
me.tooltip = me.text;
}
return me.callParent(arguments);
}
});
I'm new to extjs and I'm looking for a way to add some custom message under my combobox field.
Depending on some conditions (eg. value selected) the message needs to have different text and/or style.
I could play with errorEl associated with my combobox and change it's message/style depending on the state, but this doesnt look like a good approach.
Are you aware of any plugin allowing to add such a message, or is there a shorter way to do this?
Thank you for your suggestions. I ended up writing my own plugin, which then I attached to combobox.
I added new element after error element and I changed messages based on proper combobox events.
afterCmpRender : function() {
var me = this, cmp = me.getCmp();
var messageWrapper = {
tag : 'div'
};
var messageEl = cmp.errorEl.insertSibling(messageWrapper, "after");
cmp.messageEl = messageEl;
Ext.Array.each(me.messages, function(message) {
var messageConfig = {
tag : 'div',
style : {
display : 'none'
}
};
var newElement = messageEl.insertSibling(messageConfig, "after");
newElement.setHTML(message.value);
newElement.addCls(message.classes);
me.registerMessageEvents(me, cmp, message, newElement);
});
}
I almost always use multiple elements for this, and would not make an attempt to change the field.
Depending on your context, which you didn't provide, I'd say you could have a look at:
Ext.form.field.Display
Ext.form.Label
Ext.tip.Tip
Ext.tip.QuickTip
I'd work with the class Ext.tip.Tip.
You can create
Ext.create('Ext.tip.Tip', {
id: 'myTip',
header: false
});
and then
var tip = Ext.getCmp('myTip');
tip.update('your custom tip message');
tip.showBy(comboboxComponent);
You could also use showAt(..) instead of showBy.
For more information look into the Docu
Here is a Fiddle link to an example.
How do I reset my ExtJS filters in my grids. More specifically, how do I get the header to honour the changes to the filtering.
ie. This works fine :
grid.store.clearFilter();
But the header rendering is all wrong. I need to get into all the menu objects and unselect the checkboxes.
I am getting pretty lost. I am pretty sure this gives me the filterItems :
var filterItems = grid.filters.filters.items;
And from each of these filter items, i can get to menu items like so :
var menuItems = filter.menu.items;
But that's as far as I can get. I am expecting some kind of checkbox object inside menu items, and then I can uncheck that checkbox, and hopefully the header rendering will then change.
UPDATE :
I now have this code. The grid store has its filter cleared. Next I get the filterItems from grid.filters.filters.items and iterate over them. Then I call a function on each of the menu items.
grid.store.clearFilter();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(checkbox) {
if (checkbox.setChecked)
checkbox.setChecked(false, true);
});
}
The checkboxes do get called, but still nothing is happening :(
Try this code:
grid.filters.clearFilters();
This should take care of both the grid and its underlying store.
When you do
grid.store.clearFilter();
it can only clear the filters on the store but the grid's view doesn't get updated with that call. Hence to handle it automatically for both the grid's view as well as the grid's store, just use
grid.filters.clearFilters();
Hope it helps!
Cheers!
Your update help me but you forget the case where you have input text instead of checkbox.
So this is my addition of your solution:
grid.filters.clearFilters();
var filterItems = grid.filters.filters.items;
for (var i = 0; i<filterItems.length; i++){
var filter = filterItems[i];
filter.menu.items.each(function(element) {
if (element.setChecked) {
element.setChecked(false, true);
}
if(typeof element.getValue !== "undefined" && element.getValue() !== "") {
element.setValue("");
}
});
}
When you use grid wiht gridfilters plugin
and inovoke
grid.filters.clearFilters();
it reset applyed filters, but it don't clean value in textfield inside menu.
For clean textfield text you can try this:
grid.filters.clearFilters();
const plugin = grid.getPlugin('gridfilters');
let activeFilter;
if('activeFilterMenuItem' in plugin) {
activeFilter = plugin.activeFilterMenuItem.activeFilter
}
if (activeFilter && activeFilter.type === "string") {
activeFilter.setValue("");
}
I am working in extjs. I have to disable fields of my form.
I have used below function.
var form = Ext.getCmp('frmTender').getForm();
fields = form.getFields();
Ext.each(fields.items, function (f) {
f.inputEl.dom.disabled = true;
}
Its working for textfields but not for comboboxes and checkboxes. So Please help me how
can I disable all comboboxes
of my form.
You can use the setDisabled method of the Ext component.
f.setDisabled(true);
in place of
f.inputEl.dom.disabled = true;
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-method-setDisabled
I personally don't like the disabling of fields in extjs. The labels are getting greyed out too. I'm using it this way.
//JS
var form = Ext.getCmp('frmTender').getForm();
fields = form.getFields();
Ext.each(fields.items, function (f) {
f.inputEl.dom.readonly = true; //f.setReadOnly(true)
f.inputEl.addCls('x-custom-field');
};
//CSS
.x-custom-field
{
background: none; //#ccc
}
I have been following:
http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_2.0
And using the following example:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
I am using something very similar:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).addClass('product-selected');
}
Ext.select('.product').on('click', paragraphClicked);
});
However it does not appear to work correctly. e.target appears to return the ext viewport object.
I am actually using Ext 3 not 2 so I guess there must be differences.
I never used e.target, always e.getTarget().
Maybe you can try e.getTarget(".product") ?
Or maybe you can play with the delegate options of addListener in Ext.Element.