any example of how to use this feature ?
A customized placeholder can be provided by specifying the placeholder option provided to the as-sortable item. placeholder can be both a template string or a function returning a template string. ng-sortable , I have tried to put a template but its not appearing on the placeholder, I want the place holder to be a copy of the dragged item with low opacity.
Thanks,
I used this configuration for the "as-sortable" property
$scope.dragDropMetricsOpts =
{
orderChanged: function( event ){},
containment: "#board",
clone: true,
allowDuplicates: false,
placeholder: function( event ){
return "<div style="background: red;"></div>";
}
};
Related
i am using angular ui grid, there is one column which is getting html string as input, so to display the column value i am using ng-bind-html in cellTemplate(which works fine to display plain inner text), but cellTooltip doesn't work for tooltip(it doesn't), if i use title="{{row.entity.htmlfield}}" in cellTemplate then it shows html string but i need the plain text, how can i achieve this?
what i am using :
$scope.datagrid={
colDefs=[
{
field:'htmlfield',
cellTemplate:'<div title="{{row.entity.htmlfield}}" ng-bind-html="{{row.entity.htmlfield}}"></div>',//html field is expecting html content
cellTooltip:function(row,col){
return row.entity.htmlfield //it doesn't work with cellTemplate//
}
}
]
}
Solution 1:
Remove cellTooltip when you use cellTemplate
You can use a filter like
app.filter('trusted', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
}
});
And inside cellTemplate use -
title="{{row.entity.htmlfield | trusted}}"
Solution 2:
You can create a filter on above lines and use it in cellFilter
Tooltips respect the cellFilter, so if you define a cellFilter it will also be used in the tooltip.
Hope this helps!
We can use cellTemplate and cellTooltip like below, for example,
$scope.gridOptions = {
columnDefs: [
{ name: 'name', cellTemplate:"<div class='ui-grid-cell-contents' title='{{grid.appScope.customTooltip(row,col,COL_FIELD)}}'>{{COL_FIELD CUSTOM_FILTERS}}</div>"
}
]
$scope.customTooltip = function (row,col,value) {
console.log(row);
console.log(col);
return value;
}
I have created function for cellTooltip and passed it into title tag, and its working fine. https://plnkr.co/edit/Dcpwy5opZ9BwC8YdWf3H?p=preview
So simple
just remove cellTooltip and add title tag in the cellTemplate div.
{
field:'htmlfield',
cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>',
}
I achieved the goal using a custom directive the code for the directive is like
$scope.datagrid={
colDefs=[
{
field:'htmlfield',
cellTemplate:'<tool-tip text="{{row.entity.htmlfield}}"></tool-tip>',//html field is expecting html content, no need to use cellTooltip as it doesn't work//
}
]
}
//create a custom directive to give required feel to your field template//
angular.module('app').directive('tooTip',function(){
var linkFunction=function(scope,element,attributes){
scope.text=String(attributes['text']).replace('/<[^>]+>/gm', '');
};
return{
restrict:'E',
template:'<div title="{{text}}">{{text}}</div>',
link:linkFunction,
scope:{}
};
});
Need to change like this
cellTemplate:'<div title="{{row.entity.htmlfield}}">{{row.entity.htmlfield}}</div>'
Original cellTemplate from ui-grid source:
"<div class=\"ui-grid-cell-contents\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>"
In this template TOOLTIP and COL_FIELD and CUSTOM_FILTERS are ui-grid macro-s.
I define cellTemplate (only icon), and use cellTooltip (with fields error messages), and to work freely:
columnDefs: [
{
...
cellTemplate: '<span class="glyphicon glyphicon-alert" title="TOOLTIP"></span>',
cellTooltip: function( row, col ) {
return ...;
}
...
}
]
how to add close icon to the combobox list items at right most
Ext.define('ezdi.view.SaveSearchComboboxView', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.saveSearchComboboxAlias',
queryMode : 'local',
id : 'saveSearchComboId',
store : 'SaveSearchComboboxStore',
emptyText : 'Saved Searches',
displayField : 'searchQueryName',
valueField : 'searchQueryId',
lazyInit: false
});
You can do this by adding triggerXCls and onTriggerXClick to specify any number of additional trigger icons, where "X" is the position of additional trigger.
For example, to add a "clear" icon, you might do something like:
{
...,
id: 'saveSearchComboId',
trigger1Cls: 'x-form-clear-trigger',
onTrigger1Click: function() {
this.clearValue();
}
}
Keep in mind there are only a few "default" trigger icons, which can be found here (for classic theme): ext/resources/ext-theme-classic/images/form. These each have their corresponding "x-form-XYZ-trigger" class. For a different trigger icon (like a "close" icon or an "add" icon), you'll need to create your own images as well as the appropriate CSS class that you can apply to triggerXCls.
See this tread for more info: http://www.sencha.com/forum/showthread.php?190886-How-to-reset-a-Combobox-or-Multiselect-to-no-values-selected
var User = Backbone.Model.extend({
schema: {
date: {type: 'Date'}
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('.bootstrap').append(form.el);
What type do I enter to use the included JQuery-UI datepicker? There is no documentation on this other than:
The old jQuery editors are still included but may be moved to another repository:
jqueryui.List
jqueryui.Date (uses the jQuery UI popup datepicker)
jqueryui.DateTime
The schema type is declared in quotes and I can't figure out what the string for jqueryui.Date would be - and that doesn't work for sure.
You want to create a custom editor that you'll name for example: 'DatePicker'.
All the editors are attached to Backbone.Form.editors. Because the DatePicker is rendered exactly like a text field, we can use the text field as a base and only override the behavior specific to the datepicker.
I often use moment.js for some date related work, so this example also includes this. Also it's based on Bootstrap DatePicker and not the jQuery one, but this would be almost 100% the same.
Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
render: function() {
// Call the parent's render method
Backbone.Form.editors.Text.prototype.render.call(this);
// Then make the editor's element a datepicker.
this.$el.datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 1
});
return this;
},
// The set value must correctl
setValue: function(value) {
this.$el.val(moment(value).format('YYYY-MM-DD'));
}
});
That's it, you can now use your date picker like this:
schema: {
birthday: { title: 'When were you born', type: 'DatePicker'}
}
Not sure it undestanding right your Question
but I think you can atach the Jquery date pickers in the initialize method of the view
I am new to ExtJs.
I have been facing a problem in panels for getting panel html content.
xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.body.on('click', function() {
alert('' + this.id);
alert(Ext.getCmp('first_block').items.getAt(0).getValue());
});
}
I am not getting html content, but i am getting id like "first_block-body".
Thanks in advance.
The html property defined the HTML you want in the content of your component, in this case an Ext.Panel.
Ext.Panels create a few layers of divs in order to provide things like headers, footers, toolbars, etc.
If all you want is a div with some content, you instead want to use an Ext.Component. Components don't have a body, so a couple things change in your code.
xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.on('click', function() {
alert('' + this.id);
alert(this.el.dom.innerHTML);
}, this);
}
Notice that I added a third parameter to your on call, which specifies the this scope of the function call. I also edited your alert to print out the innerHTML of the element, assuming that's what you were trying to do.
UPDATE:
If you are going to use this component in a layout, it may need to be able to have its height and width set, meaning it needs to be of type box in order to be an Ext.BoxComponent.
Ext.getElementById('yourId').innerHTML
In ExtJs I would like to achieve the equivalent of:
<input type="radio"><label><input type="text"></label>
Where the input box is associated to the radio button.
new Ext.form.RadioGroup({
id:"alerts",
items: [
new Ext.form.Radio({
boxLabel:'Now',
}),
new Ext.form.Radio({
boxLabel:'On',
})
]
);
I would like the "On" label to have a Ext.form.TextField next to it.
I have tried adding a Ext.form.TextField to the RadioGroup but it will not show (as I assume its because its not a Radio) and I am unable to add items to the Radio object.
Any advice apprecaited, thanks.
Add an <input/> element in the boxLabel, then on the RadioGroup render event create a TextField and apply it to that element
new Ext.form.RadioGroup({
id:"alerts",
items: [
{boxLabel: 'Now',},
{boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date"
],
listeners: {
change: function() {
// really, check if "on" was clicked
if(true) {
Ext.getCmp('on_date_field').focus();
} else {
// otherwise, disable the field?
}
},
render: function() {
new Ext.form.TextField({
id: 'on_date_field',
applyTo: 'on_date', // apply textfield to element whose id is "on_date"
});
}
}
});
I've confirmed that this works with TextField, and although I haven't tried it, it should work with DateField or ComboBox too. Also untested, but instead of creating an <input/>, you could create a container element and create the TextField and renderTo that element.
I don't think that's possible unless you override the RadioButton class and change its rendering logic (and I think that would be more complex than you would think to make a textfield render correctly the way you proposed). A better approach would be to simply add the radio and the textfield as two separate fields and link them programmatically. In Ext 3.2 you could use a CompositeField to do this easily. In the radio's handler fn you can set focus to its associated textbox or whatever other logic you'd need.