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.
Related
I have a splibutton with a menu item. I want to make the width of the drop down equal to the split button width. Additionally I want to align the text in the center. How should I do it?
The width of the menu will be based on the width of the content inside. So if the width of the button will always be the same, you could set the width of the menu to that same value or you can get the width of the button and set it to the menu before rendering it.
As for centering the text, you have two options. Either via CSS, add a custom CLS to your menu and add the following CSS:
.yourCustomCls .x-menu-item-link {
text-align: center;
}
.yourCustomCls .x-menu-item-indent-no-separator {
margin-left: 0;
}
Or add the config plain: true to your menu and a style centering the text as in my example.
Example:
Ext.create('Ext.button.Split', {
renderTo: Ext.getBody(),
text: 'Commit Automatically',
menu: new Ext.menu.Menu({
plain: true,
style: 'text-align: center;',
items: [
{text: 'Commit On Trigger', handler: function(){ alert("Item 1 clicked"); }}
],
listeners: {
beforerender: function () {
this.setWidth(this.up('button').getWidth());
}
}
})
});
how do i change a panel border width? in ext 3.4 api border is a boolean.
My code
var p = new Ext.Panel({
title : 'My Panel',
width :400,
border : true //default also true.
});
how can i edit border width for example 2px or 3px??
Use CSS, Ext will account for it when calculating the component size and laying it out.
First, put a custom CSS class on your panel:
var p = new Ext.Panel({
title: 'My Panel',
width:400,
border: true //default also true.
,cls: 'my-panel'
});
Then style it:
.x-panel.my-panel {
border: 5px solid red;
}
Using ExtJS 4, I have the following window:
var mainWin = Ext.create('Ext.Window',{
title: 'IE Screwup Illustration',
id: 'MAINWIN',
constrain: true,
constrainTo: 'appdiv',
x: 0,
y: 0,
width: '100%',
height: 518,
moveable: false,
closable: false,
layout: {
type: 'border',
padding: 3
},
renderTo: Ext.Element.get('appdiv'),
}).show();
Note the rendering to an element called "appdiv", which is a element whose style is shown below:
#appdiv {
position: absolute;
left: 10px;
width: 90%;
height: 520px;
border: 1px solid;
overflow: hidden;
border-color: #000000;
}
There is no problem rendering the window. It appears within the appdiv without problems with a nice border around it.
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screen instead of within the appdiv DIV. This causes it to be displaced within the DIV so that it renders below and to the right of the left corner.
I have tried various tricks, including an attempt to reposition the window when it resizes. Nothing seems to work and I cannot think of anything else.
Could someone please give some idea how to keep this window within its DIV when a browser is resized? Thanks...
I have created a JS Fiddle to illustrate how I usually solved the problem in my projects.
The solution is to listen to the resize event of the Component over which you would like to center your window, and then calculate your window's new position. In my example this component was the viewport.
Here is the listener, that gets the job done:
viewPort.on('resize', function(vp, width, height) {
var me = this,
winWidth = me.getWidth(),
winHeight = me.getHeight(),
left = (width -winWidth) / 2,
top = (height -winHeight) / 2;
me.setPosition(left, top);
}, mainWin);
I found the answer to the problem. It turns out to be a question of timing.
It didn't make sense that the setPosition() method suggested by Matyas seemed to be ignored, so I checked the "move" event. Apparently, when an Ext window is rendered to a <div>, it receives move events after resize events. I do not know why (perhaps experts in ExtJS internals can help here?).
So instead of doing the calculations shown in Matyas' resize listener, I created a move listener in mainWin. Mine was somewhat simpler, since I wanted the window to stay put at the <div>'s upper left corner:
listeners: {
move: function(theWin,xP,yP,theOp) {
if((xP != 0) || (yP != 0)) {
theWin.setPosition(0,0);
}
}
This way, any time the browser moved the window to a position other than where I wanted it, I would set it back. This solved the problem.
Thanks for all who responded to this question (including the comments). Without those responses, I would not have had the clues I needed to solve this problem.
Try this:
Ext.EventManager.onWindowResize(function()
{
mainWin.doComponentLayout();
}, this, {buffer: 1});
Ext.EventManager.onWindowResize(function() {
if(mainWin.isVisible()) {
mainWin.center();
}
}, this, {buffer: 1});
In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:
new Ext.ButtonGroup({
columns: 1,
region: "west",
collapsible: false,
defaults: {
scale: "large",
iconAlign: "top"
},
items: [{
text: "Your Books",
iconCls: "icon-books"
} ]
})
The CSS rule just specifies the background image:
.icon-books {
background-image: url(/images/book_open.png) !important;
}
However, the image is flush left, as is illustrated below:
I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.
What config option or CSS rule am I missing?
Thanks!
UPDATE: here is a sample project demonstrating the issue.
I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:
.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
background-position: center 0;
background-repeat: no-repeat;
padding-top:18px;
}
When I tried this myself, I had no problems at all.
As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext
For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.
In my button I add my own custom class (note the 'star' class simply loads the background image).
iconCls: 'star backcenter'
And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.
.backcenter {
background-position:center !important;
width: auto !important;
}
iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...
.icon-books {
background-image: url(/images/book_open.png) !important;
background-position:center;
}
I think this should do it ...
I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.
text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}
I am new to extJs. I want to make the border of a textarea invisible so that it becomes just a blank white space (My purpose is to show it inside a fieldset).
Hoe can I achieve this?
thanks
use the style: border: none;
so:
var textArea = {
fieldLabel: 'Test',
style: 'border: none;',
hideBorders: true
};