I am trying to set image of a button but its not covering the whole button. I mean, background of button is still visible.
I am trying to do it at run time by providing different image for each button in a loop.
Here it is:
for(var i=0; i<tvStore.getCount(); i++)
{
var aButton = Ext.create('Ext.Button',
{
margin:8,
id:'button'+i,
itemId:i,
style: 'width: 110px;height:110px;background-image:url(someRandomWebURLToImage) !important',
But image is not covering all the button. or if image cannot be stretched then how can I make the button's background transparent?
Thanks,
You can use iconCls attribute to specify CSS like this:
{
xtype : 'button',
iconCls : 'cart',
text : 'Add to Cart',
iconMask : true,
padding : 10,
margin : 10,
id : 'addToBagBtn'
}
and CSS file should have:
.x-tab .x-button-icon.cart, .x-button .x-button-icon.x-icon-mask.cart {
-webkit-mask-image: url('../../touch/resources/themes/images/default/pictos/shop1.png');
}
Related
I want to create a feedback form using extjs. How to align the button at side of screen. Kinda like the one in the photo. It is snippet of dashboard
This is a floating button. Adjust the position and shape.
var body = Ext.getBody();
var button1 = Ext.widget('button', {
text: 'Edit',
handler: function (button) {
console.log("button push");
},
floating: true,
renderTo: body,
style: 'position: absolute; bottom: 20px; right: 20px;'
});
I would recommend you to use a border layout. define region:"east" like this.
set east region opacity and modify CSS if needed.
I am provided with built in extjs components classes.
I cannot change them as i am working on plugin.
I cannot override them as there are certain things which cannot be
predefined.
And also I want to change component for particular case, not all
cases.
Now If it will be possible that I pick that component from DOM,
change it any of property and render it there onwards. If it could
be done, then my work become lot easy.
Its completely a scenario. But still for ease in understanding, I am adding a sample code.
var tabPanel = Ext.create('Ext.tab.Panel', {
width : 300,
height : 200,
activeTab : 0,
items : [
{
title : 'Tab1',
bodyPadding : 10,
items : [
{
xtype : 'button',
text : 'B1'
}
]
},
{
title : 'Tab2',
items : [
{
xtype : 'button',
text : 'B2'
}
]
}
],
renderTo : Ext.getBody(),
autoRender : true
});
// Change title of tab panel
tabPanel.items.each(function(item) {
item.title = "text"+Math.random();
});
Now I want to remove this already rendered tab panel. And want to render it upon my choice wherever i want.
After lot of search, I find solution to problem. We can use doLayout() or update() function of component to fulfill purpose.
Tooltip width is not enough to display text inside it. So how can i increase the width of tooltip ? Here is my code:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.create('Ext.tab.Panel', {
width : 500,
height : 200,
style : 'margin: 50px',
renderTo : Ext.getBody(),
items : [{
title : 'Tab One'
}, {
title : 'Tab Two',
tabConfig : {
tooltip : {
text : 'Hello tab one... This is James cook. How r u doing.:)',
title : 'Tooltip Header'
}
}
}, {
title : 'Tab Three'
}]
});
});
I have used:
div.x-tip {
width: 300px !important; height: 100px !important;
}
Width is increasing but tooltip text is not adjusting to the width. I want to make tooltip text a single line. Any idea on this..??
Thanks in advance.
You can also just set a width property in the tip object.
tooltip : {
text : 'Hello tab one... This is James cook. How r u doing.:)',
title : 'Tooltip Header',
width: 100
}
You can overload:
div.x-tip {
width: 300px !important;
}
I confirmed this just now on a button with the tooltip property in ExtJS 4.2
The way that I uncovered this was pretty simple. I simply ran a grep inside of the ext/css directory for "tip" on all css files to discover what the DOM element would be (or you could simply examine the DOM yourself in the browser after showing at least one tooltip. Once you have that, you can target any of the sub-components in the hierarchy as you need to; in order to ensure that your text doesn't get clobbered.
I do wonder why the auto-sizer isn't working for this renderer but that's probably a question better asked of Sencha support.
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);
Using Ext JS 4.0.2, I'm trying to open a window that automatically sizes itself big enough to fit its content, until it hits a height limit, at which point it stops getting bigger and shows a scroll bar.
Here's what I'm doing
Ext.create('widget.window', {
maxHeight: 300,
width: 250,
html: someReallyBigContent,
autoScroll: true,
autoShow: true
});
When the window is first rendered, it's sized big enough for the really big content--bigger than the maxHeight should allow. If I attempt to resize it, then snaps down to the maxHeight of 300px.
How do I constrain the window to its maxHeight when it's initially rendered?
I have exactly the same problem and for now I'm doing a litle dirty hack :)
this.on('afterrender', function() {
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}, this);
Depending on the content of the window, you must use the afterlayout event. Instead of using this.maxHeight, to use the whole viewport, use Ext.getBody().getViewSize().height or in vanilla JS use window.innerHeight.
This version will work even if the windows contains other components and not only huge html:
listeners: {afterlayout: function() {
var height = Ext.getBody().getViewSize().height;
if (this.getHeight() > height) {
this.setHeight(height);
}
this.center();
}}
This can be better :
bodyStyle: { maxHeight: '100px' }, autoScroll: true,
I don't see an out-of-the-box way to do this. However, you might try this approach:
Place the contents of the window into a container inside the window (i.e. make someReallyBigContent be inside a container.) On afterrender, get the height of that inner container and then proceed to set the height of the outer window based on that.
How I ended up displaying a window with an unknown amount of fields on a form (constrain = body.el):
prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
layout : {
type : 'vbox',
align : 'center'
},
buttons : buttons,
maxHeight : constrain.dom.clientHeight - 50,
title : title,
items : prefForm,
listeners : {
afterrender : {
fn : function(win) {
var f = win.down('#prefForm');
f.doLayout();
var h = f.body.dom.scrollHeight;
if (f.getHeight() > h)
h = f.getHeight();
win.setHeight(h + 61);
win.center();
},
single : true
}
}
});
You can add this config on your window
maximizable: true
if you want you could programmatically 'click' that button :)
Now I see what you are trying to do. I think the only thing missing from your config is the height parameter. Set it to the same number as maxheight. That should do it, you won't need to call setHeight().
This is just like Ivan Novakov answer, except I prefer it when you override the onRender class for these types of classes.
This is for a couple of reasons. Removes an additional event listener, and in the case you have multiple things that need to occur at afterrender time. You can control the synchronization of these tasks.
onRender: function(ct,pos) {
//Call superclass
this.callParent(arguments);
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}
I had the little bit different problem. In my case ExtJS code there inside the HTML popup windows. And I had to achieve:
change the size of panel when we change the size of popup windows.
Ivan Novakov's solution worked for me.
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 20;
var height = Ext.getBody().getViewSize().height - 20;
myPanel.setSize(width, height);
});