Can I format Extj groupHeader - string-formatting

This is my groupFeature
this.myGroupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{name}'
});
What I want is trim the first character. Is there a way to do that.

I found a solution guys... to anybody who needs this... here
this.myGroupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: '{[values.name.substring(1)]}' }
);

Related

How to change drop down direction with selectize?

I'm using AgularJs Selectize plugin, in docs have posibility to change dropdown direction, but i can't realize how it works... Maybe somewho also using this plugin and can tell me how to change drop down direction from bot to up?
I find the solution from members on github, add this part of code to your controller file:
if (!window.Selectize.prototype.positionDropdownOriginal) {
window.Selectize.prototype.positionDropdownOriginal = window.Selectize.prototype.positionDropdown;
window.Selectize.prototype.positionDropdown = function () {
if (this.settings.dropdownDirection === 'up') {
let $control = this.$control;
let offset = this.settings.dropdownParent === 'body' ? $control.offset() : $control.position();
this.$dropdown.css({
width: $control.outerWidth(),
left: offset.left,
bottom: 'calc(100% + 4px)'
});
this.$dropdown.addClass('direction-' + this.settings.dropdownDirection);
this.$control.addClass('direction-' + this.settings.dropdownDirection);
this.$wrapper.addClass('direction-' + this.settings.dropdownDirection);
} else {
window.Selectize.prototype.positionDropdownOriginal.apply(this, arguments);
}
};
}
My config object is:
vm.config = {
delimiter: ',',
persist: false,
plugins: ['remove_button' ],
create: false,
dropdownDirection: 'up' <= also add this part
};
And it works perfect, thanks to guys from this topic

Protractor: How to find an element in an ng-repeat by text?

I'm looking to get a specific element inside an ng-repeat in protractor by the text of one of its properties (index subject to change).
HTML
<div ng-repeat="item in items">
<span class="item-name">
{{item.name}}
</span>
<span class="item-other">
{{item.other}}
</span>
</div>
I understand that if I knew the index I wanted, say 2, I could just do:
element.all(by.repeater('item in items')).get(2).element(by.css('.item-name'));
But in this specific case I'm looking for the 'item in items' that has the specific text (item.name) of say "apple". As mentioned, the index will be different each time. Any thoughts on how to go about this?
public items = element.all(by.binding('item.name'))
getItemByName(expectedName) {
return this.items.filter((currentItem) => {
return currentItem.getText().then((currentItemText) => {
return expectedName === currentItemText;
});
}).first();
}
And invoke method like that this.getItemByName('Item 1'). Replace Item 1 with expected string.
function elementThere(specificText, boolShouldBeThere){
var isThere = '';
element.all(by.repeater('item in items')).each(function (theElement, index) {
theElement.getText().then(function (text) {
// Uncomment the next line to test the function
//console.log(text + ' ?= ' + specificText);
if(text.indexOf(specificText) != -1){
element.all(by.repeater('item in items')).get(index).click();
isThere = isThere.concat('|');
}
});
});
browser.driver.sleep(0).then(function () {
expect(isThere.indexOf('|') != -1).toBe(boolShouldBeThere);
});
}
it('should contain the desired text', function () {
elementThere('apple', true);
}
Does this fit your needs?
I was able to solve this by simplifying #bdf7kt's proposed solution:
element.all(by.repeater('item in items')).each(function(elem) {
elem.getText().then(function(text) {
if(text.indexOf('apple') != -1) {
//do something with elem
}
});
});
Also, this particular solution doesn't work for my use case, but I'm sure will work for others:
var item = element(by.cssContainingText('.item-name', 'apple'));
//do something with item

ng-class - finding a value inside object

I have an object that looks like this:
$scope.things = [
{
name: 'Bob!',
short_name: 'bob',
info: 'something something'
},
{
name: 'Steve',
short_name: 'steve',
info: 'something something something'
},
];
I loop through them like this and add an ng-click:
<div ng-repeat="thing in things" ng-click="addThing(thing.name, thing.short_name, thing_info" ng-class="thingClass(thing.name)">content goes here</div>
the ng-click="addThing()" basically bunches up the values and adds them to the object.
When clicked, it should add the class selected - this worked fine and dandy when I wasn't using a multidimensional object, because it was simply looking for name inside the object / array (at this point, I think it's an object... but at the time, it was an array)
I can't work out how to do the equivalent to this...
$scope.thingClass= function(name) {
if($scope.thingSelected.indexOf(name) != -1) {
return 'selected';
}
};
...with the object as it now stands. I've tried to adapt a few answers from here that I found through google, such as:
$scope.teamClass = function(name) {
var found = $filter('filter')($scope.thingSelected, {id: name}, true);
if (found.length) {
return 'selected';
}
};
...but with no joy.
Can anyone point / nudge me in the right direction?
You could simply pass the thing object to thingClass:
... ng-class="thingClass(thing)" ...
and implement thingClass as follows:
$scope.thingClass= function(thing) {
return $scope.thingSelected.indexOf(thing) >= 0 ? 'selected' : '';
}
And maybe your should apply this technique to addThing also:
... ng-click="addThing(thing)" ...
$scope.addThing = function(thing) {
if ($scope.thingSelected.indexOf(thing) < 0)
$scope.thingSelected.push(thing);
}
But instead of tracking the selected things in an array its much easier to introduce a selected property in each thing:
$scope.addThing = function(thing) {
thing.selected = true;
}
$scope.thingClass= function(thing) {
return thing.selected ? 'selected' : '';
}

Resize column in SlickGrid

I have the following SlickGrid:
var eligibleProductsGrid = new recline.View.SlickGrid({
model:dataset,
el:'#selectorModal #selectorModalContainer #selectorModalGrid',
state:{
fitColumns:true,
hiddenColumns: ['id', 'mrid', 'distributedQuantity' ,'qMeasureUnit'],
gridOptions:{
enableColumnReorder:false,
gridIdCSS: arguments[0].gridIdCSS ? arguments[0].gridIdCSS: "eligpprodGs9999",
}
}
});
and i want to rezise the width of the third column.
I've tried doing this:
var cols = this.eligibleProductsGrid.getColumns();
cols[2].width = 520;
this.eligibleProductsGrid.setColumns(cols);
but i have an error saying that getColumns() is not a function.
Any ideas? Thanks!

highcharts : set title on exporting

I'm looking a way to:
hide title on the HTML page result
show title on the highcharts graph when I export it (PDF,PNG,JPEG or print)
I don't know how to proceed. There is someone able to help me?
You can define this parameter in exporting.
http://api.highcharts.com/highcharts#exporting.chartOptions
http://jsfiddle.net/BdHJM/
exporting:{
chartOptions:{
title: {
text:'aaaaa'
}
}
},
put this function in your document ready function below is a code for changing highcharts print prototype and just for the patch or to make it work put rangeSelector option in your exporting and set it to false as mentioned below you can set it to your needs in future
Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
var applyMethod = function (whatToDo, margin) {
this.extraTopMargin = margin;
this.resetMargins();
this.setSize(this.container.clientWidth , this.container.clientHeight , false);
this.setTitle(null, { text: 'SET TITLE HERE' :'});
this.rangeSelector.zoomText[whatToDo]();
$.each(this.rangeSelector.buttons, function (index, button) {
button[whatToDo]();
});
};
if (this.rangeSelector) {
var extraMargin = this.extraTopMargin;
applyMethod.apply(this, ['hide', null]);
var returnValue = proceed.call(this);
applyMethod.apply(this, ['show', extraMargin]);
this.setTitle(null, { text: '' });
} else {
return proceed.call(this);
this.setTitle(null, { text: '' });
this.yAxis[0].setExtremes();
} }
});
and in chart option set this (change it according to you need to, i am just putting my code for reference
)
exporting: {
scale: 1,
sourceWidth: 1600,
sourceHeight: 900,
chartOptions: {
rangeSelector: {
enabled: false
},
}

Resources