I have an image button which looks like :
Here is my code for the image button :
var button = new qx.ui.form.Button(null, "myapp/test.png");
container.add(button, { left: 10, top: 10 });
How to remove the button border & the padding ? I want to display the image only.
note: container is a qx.ui.layout.Canvas.
The border and padding are defined by the button's decorator, which is nullable:
button.setDecorator(null);
Related
I'm a UI5 beginner and I want to create two responsive sap.m.Buttons. The width should be 50% of the view per Button. The problem is, I don't really get how to set the width for a responsive button.
var oButtonNeuePal = new sap.m.Button({
icon : "sap-icon://add-document",
text : "{i18n>lieferschein.btnNeuePal}",
press : [ 'NEUEPAL', oController.onButton, oController ]
});
var oButtonProtokoll = new sap.m.Button({
icon : "sap-icon://list",
text : "{i18n>lieferschein.btnProtokoll}",
press : [ 'PROTOKOLL', oController.onButton, oController ]
});
/***********************************************************************
* Page
*/
var oForm = new sap.ui.layout.form.SimpleForm({
layout : sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout
});
var oGroupH = new sap.m.HBox({
justifyContent : sap.m.FlexJustifyContent.SpaceBetween,
});
oGroupH.addItem(oButtonNeuePal);
oGroupH.addItem(oButtonProtokoll);
var oGroupV = new sap.m.VBox();
oGroupV.addItem(oGroupH);
//I removed some labels and Inputfield
oForm.addContent(oGroupV);
var oPage = new sap.m.Page({
customHeader : oBar
});
oPage.addContent(oForm);
This might be interesting for you: Flex Box - Size Adjustments
When filling a HBox/FlexBox with content, not every control (maybe even no control) will automatically take the whole available space.
You have to give the Button a width of 100% and set the growFactor of its layout to 1.
In XML (from my sample link):
<Button text="{i18n>lieferschein.btnNeuePal}" width="100%">
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
</Button>
In JS (probably):
var oButtonNeuePal = new sap.m.Button({
icon : "sap-icon://add-document",
text : "{i18n>lieferschein.btnNeuePal}",
layoutData: new sap.m.FlexItemData({ growFactor: 1}),
width: "100%",
press : [ 'NEUEPAL', oController.onButton, oController ]
});
Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached image
https://fiddle.sencha.com/#fiddle/1dm7
I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.
Thanks in advance
You can extend ProgressBarWidget, and override the template, like:
Ext.define('Fiddle.view.ProgressBarWidget', {
extend: 'Ext.ProgressBarWidget',
xtype: 'fiddle-progressbarwidget',
template: [{
reference: 'backgroundEl'
}, {
reference: 'barEl'
}, {
reference: 'textEl',
style: {
left: 0,
right: 0
}
}],
});
Working example: https://fiddle.sencha.com/#fiddle/1dn4
The definitive solution is to add an onResize handler on the progress bar container:
onResize: function () {
var me = this,
progressBar = me.down('progressbarwidget');
// Set text width to element width so that it can be centered
progressBar.setWidth(progressBar.el.getWidth());
}
This idea is copied from what happens in Ext.grid.column.Widget.onResize().
The solution from user CD.. doesn't work (nor does the one in user2751034 comment)
in the case you have two-color-text, like in Classic theme:
even if you reproduce the template in Sencha sources (with textEl children of barEl):
I am using purecss to make a responsive website. In my page I have a HEADER and FOOTER; both of them are fixed and in between them I have CONTENT which has left vertical menu and the right side has some content.
Now what I want to achieve is when any resizing happens then my left side menu should have a scroll bar like of its own and the content in the right should also have one. Plus the menu div should not go mix with the footer or the header.
I am not very sure but do I need to use mobile-webkits to resolve this issue.
I have found something to help:
http://filamentgroup.github.io/Overthrow/examples/2-column/
Is this the only way or are there any other libraries which can help me in this?
UPDATED FIDDLE
Basically, I added in JQuery with functions to change the height of the left hand menu on resize. That, combined with the overflow from Y forces it to have scroll bars.
Onload:
$(function() {
var menuWrapper = $("#menu");
var height = $(window).height() - $("#header").height() - $("#footer").height();
menuWrapper.css("height", height);
});
On Resize:
$(window).on('resize', function(){
var menuWrapper = $("#menu");
var height = $(window).height() - $("#header").height() - $("#footer").height();
menuWrapper.css("height", height);
});
CSS:
#menu {
overflow-x: hidden;
overflow-y: auto;
}
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');
}
I have a panel with a "form" layout, containing several buttons. now I want to enable this panel resize according to window resizing. How can I get this done?
thanks.
Ext.EventManager.onWindowResize(function(w, h){
panel.doComponentLayout();
});
Assuming you have a Panel named 'panel' with some automatic sizing built in (e.g. height: "100%"). Otherwise, the new width and height of the window are passed into the anonymous function passed to onWindowResize().
As wrote #deniztt you should subscribe to EventManager class onWindows Resize Event.
It can be something like this:
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 160;
var height = Ext.getBody().getViewSize().height - 140;
panel.setSize(width, height);
});
Where panel is reference to your panel
You can read about it here.
You can make the panel resizable by setting the 'resizable' config option, see the docs for the various options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.
As far as how the form components interact you'll need to set anchor's if you want to use a form layout or switch to an hbox/vbox type of set-up with various flex settings.
You can set the size for window and set the child panel's autoHeight and autoWidth attributes true.
Another way is catching the resize event of the window and resize the child panel according to the new size values.
Thanks to Gegory and Joseph for the EventManager solution. I've done some minor changes to this solution, replacing the getBody() with a DIV and setting an initial width/height of my chart (or any other component):
<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
var renderDiv = Ext.get('chart_div');
var chart = Ext.create('Ext.chart.Chart', {
renderTo: renderDiv,
width: renderDiv.getWidth(),
height: renderDiv.getHeight() - 50,
...
});
Ext.EventManager.onWindowResize(function () {
var height = renderDiv.getHeight() -50;
var width = renderDiv.getWidth();
chart.setSize(width, height);
});
});
autoWidth and autoHeight don't seem to work for me (Ext-JS 4.2.1).