we have an application that use some TextArea components in various tabs. The problem is that when we insert text into a TextArea (with grow:true) the TextArea correctly resize itself, but when we change the tab and display a new TextArea, this new TextArea has the size of the TextArea present into the other tab.
When we click on it the TextArea automatically resize to the right size.
How can i fix it ?
Thanks
i've found a solution by myself, i call autoSize() when the user change the tab
mytabs.on("tabchange", function(){
var list = Ext.query('textarea');
for(var i = 0; i < list.length; i++){
var ta = list[i];
var id = ta.getAttribute('id');
var cmp = Ext.getCmp(id);
if(cmp && cmp.autoSize){
cmp.autoSize();
}
}
});
And it works great
Related
I am trying to implement a Kendo ui-Menu in the toolbar of a Kendo Grid in Angular. I am manually creating the column list on the menu. I am able to show/hide the columns when clicking the checkboxes. I need to iterate through the checkboxes when the menu opens so that I can set checked/unchecked based on the options set on each column in the grid. The problem is that I don't know how to access the check/unchecked of the child nodes.
The code below gets all of the child nodes, but I don't know how to access their checked/unchecked values:
var columns = $(e.item).find(".k-item:not(:has(.k-group))");
I have a Dojo setup where the check/uncheck works, but I don't know how to access them from 'onOpen'. Any assistance is grealy appreciated.
First you have to find checkbox element and then you can get checkbox checked value by using .prop("checked") method.
So if you eg. want to switch checkboxes values on menu open you can use:
$scope.onOpen = function(e) {
var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
var checkbox = $(checkboxes[i]);
checkbox.prop("checked", !checkbox.prop("checked"));
}
}
Updated dojo: http://dojo.telerik.com/OnAXI
Thanks to Jarosław Kończak who put me on the right path, here is how I eventually was able to use the "hidden attribute" on my columns to set the checkboxes as checked or !checked by altering his suggestion just a little:
$scope.onOpen = function(e) {
var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = $(checkboxes[i]);
if (checkbox.prop("checked")) {
var fieldData = checkbox.data("field");
var columns = $scope.SearchGrid.columns;
for (var x = 0; x < columns.length; x++) {
if (columns[x].field == fieldData) {
if (columns[x].hidden == true) {
checkbox.prop("checked", false);
}
}
}
}
}
}
Here is a working Dojo with dynamically created columns instead of the "manual" column list.
I have container, which have box,textfield and button. I am adding that container in one panel. When I am clicking on button I want to remove that container. Problem is, Container is removed but it not showing on UI.
My Code where I am removing container from panel.
var panel = Ext.getCmp("ABC");
var record = panel.items.items;
var recordlength = record.length;
for (var j = 0; j < recordlength - 1; j++) {
if (record[j].Label == me.Label) {
record.remove(me);
panel.remove();
}
}
As you say you are able to remove container then try this to update your panel.
panel.update();
panel.doLayout();
It will update your panel after removing item from that.
it works for me:
while (this.items.items[0]) {
this.remove(this.items.items[0]);
}
I have an angular-ui ui-scroll directive (1.3.0) living in a div that is hidden by default with an ng-show. When it is hidden, ui-scroll just keeps loading data from the datasource even though the ui-scroll-viewport's height is set. If the div is shown, it behaves correctly. So, for now my div is 1px wide :/
I'm sure I can solve this with an ng-if to dynamically add this to the DOM. However, I wanted the div to hide/show responsively - so driven off of css.
Any suggestions on how to have ui-scroll only load 1 page from the buffer when hidden? thank you.
You can try to manage it through the datasource implementation:
$scope.datasource.get = function(index, count, success) {
// prevent data getting while ui-scroll is invisible
if (!$scope.isScrollerVisible) {
return; // or let him request for 1 pack and prevent others, any logic
}
// get required data and pass it into success callback
var result = [];
for (var i = index; i <= index + count - 1; i++) {
result.push({text: "item #" + i});
}
success(result);
}
Also you probably need to initiate scroll reloading once (adapter doc):
$scope.$watch('isScrollerVisible', function(value) {
if(value) {
$scope.datasourceAdapter.reload()
}
});
I am trying to hide extjs date-field on clicking anywhere on DOM except date-field. while clicking anywhere in dom bodyClick function get called.On basis of page co-ordinates element object get retrieved and then this element object get compared with date-field object.This works fine but problem comes whenever i am clicking on date-picker again "date-field" get hide.
sample code -
bodyClick: function(e){
var me = this, elem, t;
var flag =true;
elem = me.getEl();
for(t = Ext.dom.Element.fromPoint(e.getX(), e.getY()); t && t != null;){
if (Ext.fly(elem ).contains(t)){
flag =false;
}
}
if(flag ){
me.hide();
}
}
Any Suggestions for hiding datefield while clicking anywhere in DOM (extJs).
You can try this in afterRender of the panel or container in which your component is in.
this.mon(Ext.getBody().getEl(), 'click', this.yourFunction, this);
yourFunction:function(e){
var comp = Ext.ComponentQuery.query('datepicker')[0];//Get your datepicker component
if (Ext.fly(e.getTarget()) != comp) { //get the target using Ext.fly
comp.hide(); //Hide the component if the target is not the datepicker
}
}
Hope this helps you.
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("");
}