How to add space between checkbox and text (fieldLabel)?
I tried adding width: 200, but it's not working
var delete = Ext.create('Ext.form.field.Checkbox', {
itemId : 'deleteMICR',
name: 'deleteMICRDataID',
fieldLabel : 'Delete MICR Data ?' + '<span id = "deleteMICRHelpIconId" ><img src="../static/images/help_icon.png" height="18" class="icon"/></span>',
hidden : true,
width: 500,
listeners: {
render: function(c) {
new Ext.ToolTip({
target: Ext.get('deleteMICRHelpIconId'),
html: 'This is applicable only XXXXXX'
});
}
}
});
You need to use labelWidth.
Here's the fiddle: FIDDLE
Also, if you want label to be on the right side of checkbox use 'boxLabel' property.
Related
I try to setup custom dropdown in Kendo UI.
I have a reference to my issue.
http://dojo.telerik.com/aFIZa/13
My issue is that I do not know how I can setup the selected text in the template attribute? I want to show the text field but save the id as a value. And I do not want to use external datasource. I would like it as inline in the json.
The code is below:
$scope.mainGridOptions = {
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "Category", title: "Category", width: "180px",
editor: function(container, options) {
var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category"/>')
.appendTo(container);
$compile(editor)($scope);
editor.css("visibility", "visible");
}
, template:"selected text in the combo "
}
], editable: true
}
Ok, this was a tough one, but I think I could achieve what you want, or at least I got closer:
$scope.mainGridOptions =
{
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{
field: "Category", title: "Category", width: "180px",
editor: function(container, options)
{
// #1
var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category,events:{ change: onChange }"/>')
.appendTo(container);
$compile(editor)($scope);
editor.css("visibility", "visible");
},
// #2
template:kendo.template($("#column-template").html())
}],
editable: true,
// #3
edit: function(e)
{
var ko = kendo.observable(
{
onChange: function(e)
{
var el = $(e.sender.element);
var ddl = el.data("kendoDropDownList");
var ds = $scope.dataSource.getByUid(el.closest("tr").data("uid"));
ds.OptionText = ddl.text();
},
});
var widget = $(e.container).find("input");
kendo.bind(widget, ko);
}
}});
Demo.
In the code you can notice 3 changes:
data-bind="value:Category,events:{ change: onChange }" Look that I have added an events object in the bind, which I declare onChange as the change event handler. We'll talk about this in the 3rd item below;
For a complex template(with javascript code and logic) I created a script content and rendered it at the template property. The template is this:
<script id="column-template" type="text/x-kendo-template">
# if (data.hasOwnProperty('OptionText')) { #
#: OptionText #
# } else { #
#: "selected text in the combo" #
# } #
</script>
In the template I simply check for the property OptionText in the model(dataSource's current item) and: if it exists, use it; else, use the default text. We'll talk about OptionText in the 3rd item, below;
Now, here I have added an edit event to the grid. In that event I created an observable object, where I define the onChange function handler. In that function I seek for the current dataSource(ds) and I add text of the selected item in the dropdownlist in it, as the property OptionText, which I use in the template above explained.
I hope this explains how it works(in fact I hate working with those binders and observables, but sometimes they are needed).
Good luck.
this.horizontalLine = {
xtype: 'box',
hidden: false,
autoEl : {
tag : 'hr'
}
};
I want to hide this horizontal line. But
this.horizontalLine.hide()
is undefined.
I tried using this.horizontalLine.hidden = true also. In that case, hidden property is set as true but the line is still visible. Is there some other way to do this?
I resolved the issue by placing the horizontal line in a panel and hiding the panel insted.
this.rulesLabel = new Ext.form.Label({
text : 'Rules:',
style : 'font-size:11px;font-weight:bold;color:#15428B;padding-right:10px;padding-top:50px; margin-left:10px;'
});
this.horizontalLine = {
xtype: 'box',
autoEl : {
tag : 'hr'
}
};
this.lineHolder = new Ext.Panel({
id: 'lineHolder',
hidden : true,
border: false,
layout : 'form',
bodyStyle : 'padding-top:10px;',
items : [{xtype: 'box'},this.rulesLabel, this.horizontalLine]
});
I used this.lineHolder.show() and this.lineHolder.hide() to show and hide the line respectively.
Have you tried this.horizontalLine.hidden = true;
Ext.Component has a hide() method, so your code should work.
See a working example: https://fiddle.sencha.com/#fiddle/ku7
I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
I'm making an ExtJS Component, and I want it to use a QuickTips tooltip. If I make an element using DomHelper, I can set a tooltip, no sweat. If, however, I make a Component, like
new BoxComponent({
qtip: "This is a tip"
});
nothing happens. I've also tried naming the property "tooltip", but no luck. Is there a right way to do this? The hack I have in place now that works is
new BoxComponent({
qtip: "This is a tip",
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
I feel like that can't be right. I guess I could just extend Component to do that automatically, but it seems like a common enough case that I should be able to do it without poking under the hood like this.
In ExtJS 4.2.1, I am able to add a tip to a checkbox this way:
new Ext.form.field.Checkbox({
...
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
});
I think you're doing it absolutely right. I really don't see the need for QuickTips in arbitrary Components, particularly in Containers, since that might lead to multiple tooltips within the same Component.
It should work :
new BoxComponent({
tooltip: new Ext.ToolTip({
title: 'Example Tooltip title',
text: 'Example Tooltip text'
}),
listeners: {
rendered: function(c){
Ext.QuickTips.register({
target: c.getEl(),
text: c.qtip
}
}
});
Hrm. I took a look at how Ext.Button does it, with passing tooltip to the configuration calling setTooltip under the hood.
Untested, but I think your best bet is something like:
Ext.Component.prototype._onRender = Ext.Component.prototype.onRender;
Ext.override(Ext.Component, {
onRender: Ext.Component.prototype._onRender.createSequence(function(ct, position) {
// setTooltip code adapted from Ext.Button, looking at tooltip property
});
});
I think this is the best way in Extjs 4:
you should add an afterrender listener, then when yor componenten is already created you can add the tooltip, this way:
listeners : {
afterrender : function(obj) {
if (this.max != null && this.ave != null && this.min != null) {
obj.tip = Ext.create('Ext.tip.ToolTip', {
target : obj.getEl().getAttribute("id"),
trackMouse : true,
renderTo : document.body,
html : this.htmlTip,
title : this.title
});
}
}
}
I hope it helps.
Simplest way is to set 'data-qtip' attribute on the main element of the component:
{
xtype: 'box',
autoEl: {
'data-qtip': "Tooltip text"
}
}
Make sure to enable qtips on application startup:
Ext.tip.QuickTipManager.init();
I always use this way in ExtJs 3
listeners: {
render: function(c) {
Ext.QuickTips.register({
target: c,
text: 'Enter \'-1\' for a 1 time only'
});
}
}
This way works perfect! Try it! (Extjs 4.2)
var boxComponent = Ext.create('Ext.Component', {
id: 'id111',
html: '<img src="js/extjs/resources/cb-theme/images/shared/icon-question.png">',
width: 20,
height: 20,
margin: '0 0 0 10'
});
Ext.tip.QuickTipManager.init();
Ext.tip.QuickTipManager.register({
target: 'id111',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 10000 // Hide after 10 seconds hover
});
{
xtype: 'checkbox',
fieldLabel: 'Test Label',
name: 'data_field',
autoEl: {
tag: 'div',
'data-qtip': 'This is a tip'
}
}
{
xtype: 'checkbox',
tip: 'This is a tip',
listeners: {
render: function(c) {
Ext.create('Ext.tip.ToolTip', {
target: c.getEl(),
html: c.tip
});
}
}
}
I am dealing with property grid. I want to prevent auto sorting of column names for property grid.
here is my code. Bold highlighted code is my source for property grid and its order is just like I want to see. But Ext is auto sorting column orders alphabeticly. How can I prevent that.
Thanks for any suggestion.
Ext.ns('Application.propertygrid');
Application.propertygrid.FileDetail = Ext.extend(Ext.grid.PropertyGrid, {
title: 'File Detail',
height: 200,
border: false,
stripeRows: true,
flex: 1,
initComponent: function () {
Application.propertygrid.FileDetail.superclass.initComponent.apply(this, arguments);
},
source: {
Name: 'Please select a file',
Type: 'Please select a file',
Size: 'Please select a file',
Path: 'Please select a file',
FullPath: 'Please select a file',
Width: 'Please select a file',
Height: 'Please select a file'
},
listeners: {
beforeedit: function(){
return false; // prevent editing
},
headerclick: function(){
return false; // prevent column sorting on click
}
}
})
Ext.reg('filedetail', Application.propertygrid.FileDetail);
Yeah. I've done with it. And here is the solution.
var p = new Ext.grid.PropertyGrid({
...
// do not specify 'source' here
});
delete p.getStore().sortInfo; // Remove default sorting
p.getColumnModel().getColumnById('name').sortable = false; // set sorting of first column to false
p.setSource(source); // Now load data
This will not work for the Extjs 4:
delete p.getStore().sortInfo; // Remove default sorting
p.getColumnModel().getColumnById('name').sortable = false; // set sorting of first column to false
p.setSource(source); // Now load data
You can try this:
p.getStore().sorters.items = [] // which should remove sorting information from the store
p.setSource(source) // now load the data
For Extjs 3.4 should only need:
delete propertygrid.getStore().sortInfo;
This is the way I do this:
When I define my columns I set the sortable property to false and I define my own 'sortable flag', like this:
var column = {
xtype: 'column-component',
...
sortable: false,
sortableColumn: true
}
Later when a user clicks on the column header (the headerclick event gets triggered) and I check if the column is sortable or not, like this:
onHeaderClick: function(ct, column, e) {
if (column.sortableColumn) {
// do your own sorting ...
}
}