I am trying to put button with fieldLebel. Both are coming fine but fieldLabel appearing on top of Button. How to make it horizontal alignment.
My code :
var dButton = new Ext.SplitButton({
text: "Before",
id:"B4"
fieldLabel: "Expiry Date",
width : 150,
scope: this,
labelAlign:'left',
disabled : false
}
I am trying to achieve by style but no luck.
Try to use the labelStyle property inside your SplitButton config.
Related
I've got a datatable that is responsive, except for the header. The table is initialized according to the code below:
$('.datatable-objects').DataTable({
autoWidth: false,
responsive: true,
scrollX: true,
dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
language: {
search: '<span>Filter:</span> _INPUT_',
lengthMenu: '<span>Show:</span> _MENU_',
paginate: { 'first': 'First', 'last': 'Last', 'next': '→', 'previous': '←' }
}
});
// Add placeholder to the datatable filter option
$('.dataTables_filter input[type=search]').attr('placeholder','Type to filter...');
// Enable Select2 select for the length option
$('.dataTables_length select').select2({
minimumResultsForSearch: Infinity,
width: 'auto'
});
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.datatable-objects').css({"width":"100%"});
$('.datatable-objects').on( 'draw.dt', function () {
$('.dataTables_scrollHeadInner').css({"width":"100%"});
$('.datatable-objects').css({"width":"100%"});
});
});
I need the css hacks at the end in order to make it resize appropriately on window resize. Otherwise, there is a hard size put in the width property and resizing is not working correctly.
I'm not clear on why I need to add this, while in other examples I see there is no need. Anybody a suggestion?
Let's say you have the "tbl-principal" table, then you just need to add as follows:
$('#tbl-principal').dataTable().fnAdjustColumnSizing();
Remarks: if you need to resie on window resize, the code of above needs to be putted on $(window) resize function.
In my case, I´m doing a show/hide div, so... i just put the code on my function...
And that's it... It's working!
I am trying to add a tooltip on extjs overflow button, but I can't find a way to do that. It's not mentioned on docs either. Has anyone been able to do that? Either that or changing the text for the button
I found
overflowText: 'More >'
But this doesn't seem to work
You can add a tooltip to the overflow button during the afterrender event of the toolbar. The target element would be this.layout.overflowHandler.menuTrigger.el in the afterrender event.
Working jsFiddle http://jsfiddle.net/gJjTY/ (the overflow icon is in the bottom right of the toolbar, the icon isn't rendering due to lack of css)
Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 300,
margin : '5 0 0 0',
layout : {overflowHandler: 'Menu' },
items : [
{
text : 'This is a Button',
tooltip: 'This is a tip',
},
{
text : 'This is another button',
},
{
text : "this is yet another button!"
}
],
listeners: {
afterrender: function(view){
var me = this;
console.log(me);
Ext.Function.defer(function(){
Ext.create('Ext.tip.ToolTip', {
target : me.layout.overflowHandler.menuTrigger.el,
anchor : 'left',
dismissDelay : 0,
showDelay : 0,
autoHide : true,
html : "This is a tooltip!"
});
}, 100);
}
}
});
Ext.onReady(function(){
Ext.QuickTips.interceptTitles = true;
Ext.QuickTips.init();
});
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}
I've been experimenting with using a UI Dialog window to display an existing form (page with the form and no layout). I'm not sure if I'm doing this the right way but it seems to work fine minus a couple of pieces of bad behavior. This is the behavior right now:
The dialog window with no conent opens (very small/empty)
About a half second later the content loads and the window expands insantly (looks bad visually)
Even though the window width expands when the content is loaded, the title bar does not adjust to the new width and remains very small width wise. Although if resizeable is set to 'true' the title will expand. It's just not responding with a width adjustment when the content from the hidden div is loaded.
How could I go about not displaying the dialog until the content is finished loading into the dialog, and how could I force the dialog title to width adjust right after the content is finished loading?
<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A>
<script type="text/javascript">
newItem= function(type) {
$("#form_load").load(
'/items/new', {item_type: type}).dialog({
modal:true,
draggable: true,
resizable: false,
width:'auto',
height:'auto',
title: 'Some title',
position: [150, 150]
});
};
</script>
Thanks!
You're going to want to call the dialog after the content is loading.
You can do this by using $.load's callback method.
<script type="text/javascript">
newItem = function(type) {
$("#form_load").hide().load(
'/items/new',
{item_type: type},
function (data) {
$(this).dialog({
modal : true,
draggable : true,
resizable : false,
width : 'auto',
height : 'auto',
title : 'Some title',
position : [100, 100]
});
}
});
}
</script>
You may also want to include a hide/show toggle so the #form_load container isn't displayed until the content is loaded.
See jQuery's $.load docs here: http://api.jquery.com/load/
UPDATE: Added .hide() so content isn't shown until dialog is created.
I have two Ext.menu.CheckItem's in a group. How would I change the checked item's disc icon to something else? I would like to retain the radio button functionality (only one selected), but have a check mark instead of the disc.
var options = new Ext.Button({
allowDepress: false,
menu: [
{checked:true,group:'labels',text:'Option 1'},
{checked:false,group:'labels',text:'Option 2'}
]
});
You can achieve that effect (radio controls that look like check boxes) by setting the inputType configuration option to 'checkbox':
var options = new Ext.Button({
allowDepress: false,
menu: [
{inputType:'checkbox',checked:true,group:'labels',text:'Option 1'},
{inputType:'checkbox',checked:false,group:'labels',text:'Option 2'}
]
});
As an example, here are two screenshots that show the effect of inputType:'checkbox':
First screenshot http://www.freeimagehosting.net/uploads/2f662f202c.png
Second screenshot with the "Red" option http://www.freeimagehosting.net/uploads/66c002aad2.png
I modified Ext JS' Checkbox/Radio Groups demo and only added the option to the "Red" radio component configuration.