There are 3 divs, each having a panel in them. Initially, only 2 panels are displayed and the other is hidden. On clicking 'Update' in one of the panels, these 2 div are hidden and the 3rd one is shown.
There is a set of buttons in the 3rd panel. The below is the code for it
buttons: [{
xtype: 'checkbox', id:'usapCheck', boxLabel: 'I Accept', allowBlank: false, margin: '1 1 4 230'
},{
buttonAlign: 'right',margin:'0 0 0 3.6',text: 'Save',width: '30',iconCls: 'save',
handler: function() {
//code to save form details
}
},{
buttonAlign: 'right',margin:'1 1 0 3.6',text: 'Clear',width: '30',iconCls: 'clear',
handler: function() {
//code to clear the fields
}
},{
buttonAlign: 'right',margin:'1 1 1 1.6',text: 'Back',width: '30',iconCls: 'back',
handler: function() {
//code to hide this div and show other divs.
}
}]
When I click the back button, the 3rd panel is hidden and displays the 2 other grids in the same js. But when I again click the 'update' button, to display the 3rd panel, the alignment of these buttons change.
So, on hiding and showing the panels, the alignment changes in a strange way.
I am totally lost, without any clue. Can anyone please help me?
Off the top of my head:
You shouldn't use buttonAlign: 'right' there and your width is set as a String for all your buttons, using ExtJS, when you specify your width value as String it works like CSS values, so you have to pick:
width: 30 // 30 pixels
// or
width: '30px' // 30 pixels
Correct this and your buttons shouldnt look messed up anymore.
Related
I have a grid panel with a bottom toolbar:
this.bbar = [
"->",
{
text:"<font color = white><b>Save</b></font>", itemId:"save",
},
"<-",
{
tooltip:"Back to Home Screen", itemId:"backhome", text:"<b>< back</b>"
}
];
the right arrow -> moves the save button all the way to the right. So I thought adding a left arrow <- would center the two buttons that did not work. Both buttons are pushed to the right and the left arrow can be seen so i dont think "<-" is valid.
Is there another approach i can take to center my two buttons?
thanks..
Append layout config to your toolbar.
layout: {
pack: 'center',
type: 'hbox'
}
Documentation (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.layout.container.Box-cfg-pack)
I'm using qTip2 for tooltips. I want to have this tooltip hiding behavior:
- toopltip hides when I click close button on title (button: true)
- tooltip hides when I click elsewhere on the page (event: 'unfocus')
- tooltip hides when I don't interact with it for 3 seconds (inactive: 3000), but only if my mouse cursor is not on the tooltip (fixed: true)
Hiding when close button is pressed is fine:
content: {
title: {
button: true
}
}
Hiding when unfocus is also ok:
hide: {
event: 'unfocus'
}
Hiding when I don't interact with it is still no problem:
hide: {
event: 'unfocus',
inactive: 3000
}
Now I can close the tooltip by clicking elsewhere on the page, or on close button, or by not moving mouse over the tooltip for 3 seconds. But when my mouse is on tooltip and it doesn't move for 3 seconds, the tooltip is also closed - this is undesirable.
For staying visible when mousing onto tooltip I can use this:
hide: {
fixed: true,
delay: 3000
}
Now it closes when mouse is not on tooltip for 3 seconds. But not when I click elsewhere on the page. So let's combine unfocus and fixed:
hide: {
event: 'unfocus',
fixed: true,
delay: 3000
}
Now it will close when I click elsewhere on the page, but not after 3 seconds after leaving tooltip. So let's try adding inactive:
hide: {
event: 'unfocus',
inactive: 3000,
fixed: true,
delay: 3000
}
Now it will close when I click elsewhere on the page, also after 3 seconds after leaving the tooltip, but also after 3 seconds of inactivity when I'm on the tooltip.
How can I close tooltip when I click elsewhere on the page and after 3 seconds after leaving the tooltip, but not when I'm still on it?
I had a similar requirement and as xr280xr mentions, the only solution I see is to implement the 'unfocus' part yourself. So you end up with your configuration being:
$el.qtip({
content: {
title: {
button: true
}
},
hide: {
fixed: true,
delay: 3000
}
})
and then to implement the unfocus behaviour:
var api = $el.qtip('api');
$el.closest('html').on('mousedown touchstart', function(e) {
api.hide(e)
});
In a fiddle: http://jsfiddle.net/pvanb/n04qL8jg/
In general, I am trying to have an icon which stays to the right of a field. I need it to work in Firefox, Chrome, IE11 and IE8
JS Fiddle: http://jsfiddle.net/e8f6N/3/
There is a fieldset which can be expanded or collapsed. When the fieldset changes, the fields below it move up or down to compensate for the movement. When this happens, Firefox is unique in that the icons do not move with the field's body.
I find that if I use relative positioning rather than absolute, the icon will move with the field like it should. However, then there is some white space being put below each field, which I do not want.
Advice is appreciated in the following questions:
A way for firefox to move the icon with the rest of the field?
A way to use relative positioning and not have the extra space being
inserted below the field?
Alternatively, a better way to skin this cat?
Code used in fiddle:
Ext.onReady(function () {
Ext.QuickTips.init();
var fieldSet = Ext.create('Ext.form.FieldSet', {
title: 'Simple Collapsible Fieldset',
collapsible: true,
items: [{
xtype: 'label',
text: 'Watch the icon and collapse this fieldset'
}]
});
var textBoxWithInfoIcon = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Example',
listeners: {
afterrender: function (me) {
var icon = me.getEl().down('.x-form-item-body').createChild({
cls: 'x-form-info-icon',
tag: 'img',
src: 'broken',
width: 16,
height: 18,
'data-qtip': 'an example textfield to simulate this icon which does not move',
'data-qtitle': 'Field Information'
});
var xPosition = 130;
var yPosition = 0;
icon.alignTo(me.getEl(), 'tl-tr', [xPosition, yPosition]);
}
}
});
var textBox = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Example'
});
var textBoxWithInfoIcon2 = Ext.create('Ext.form.field.Text', {
fieldLabel: 'Example',
listeners: {
afterrender: function (me) {
var icon = me.getEl().down('.x-form-item-body').createChild({
cls: 'x-form-info-icon',
tag: 'img',
src: 'broken',
width: 16,
height: 18,
'data-qtip': 'an example textfield to simulate this icon which does not move',
'data-qtitle': 'Field Information'
});
var xPosition = 130;
var yPosition = 0;
icon.alignTo(me.getEl(), 'tl-tr', [xPosition, yPosition]);
}
}
});
var panel = Ext.create('Ext.panel.Panel', {
title: 'Title',
frame: true,
width: 400,
height: 200,
items: [fieldSet, textBoxWithInfoIcon, textBox, textBoxWithInfoIcon2],
renderTo: document.body
});
});
p.s. There are a lot of questions with similar titles, yet as far as I've found they don't have to deal with a collapsing fieldset and just use absolute positioning in their css.
EDIT
More details after working with it for a while: After trying to add an info icon to a field's body, the input of the field is at the same level as the icon, but the input is set to take up 100% of the width. I am not sure where/how I can change this.
Absolute positioning of the injected icons is not the best solution for the info icons after fields.
Much better would be to add a after the input field parent . That would solve everything: Input would get shorter to make space for the icon, no need to calculate and set position of the icon, no problems with collapsible fieldset as of now.
I think you need this plugin: Form Field Icon Plugin
If I have grid column in a ext grid, sub columns(
Email and phone columns in the demo) does not match up.
Here is the demo : https://fiddle.sencha.com/#fiddle/5ih
I have played with the width/minWidth etc but doesn't seem to work.
But if I make the grid column less wide sub columns seems to fit perfectly.
I thin tha maybe the problem is that you must give the minWidth to fix the header,
and add the flex property to each column.
Here is the fork of your fiddle with the change I say.
minWidth : 500
flex : 1
https://fiddle.sencha.com/#fiddle/5iq
If you would like to use the sub columns like the others, for example you have 2 columns which has fixed width, and the grouped columns should behave like columns with flex (auto width), you need to write an own function to do this resize.
It's only two lines: sencha example
Description: you need to add a resize event listener to grid and inside the function resize the sub column(s)
Grid listener:
listeners: {
resize: function(grid) {
// you need to add and itemId for the sub columns parent
var subCols = grid.getView().getHeaderCt().child('#sub-cols');
// 200 = sum of the fixed width of columns
subCols.setWidth(grid.getWidth() - 200);
}
}
Grid columns:
{
text: 'sub columns',
itemId: 'sub-cols',
columns: [{
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}]
}
I have a panel with an accordian layout containing multiple (max. 10) property grids.
This works fine when there are a couple of property grid items and there is space in the panel to expand them. However if the panel is full of collapsed grids then they cannot be expanded. Manually increasing the height of the panel allows them to be expanded.
autoScroll is enabled. If I set autoHeight true the panel sizes to fit all items collapsed but wont resize to expand one.
Hopefully someone can tell me what I am doing wrong.
I am working with Ext 3.4.0 due to compatibility with GeoExt.
Thanks
Tom
Example showing 2 property grids expanding correctly
http://s9.postimg.org/ex4e6nxwv/working.jpg)
Example showing 10 property grids that wont expand
http://s13.postimg.org/r06ylu2h3/not.jpg
Code for creating panel and propertygrids:
items.push({
xtype: "propertygrid",
title: title,
source: feature.attributes,
sorting: false
});
if (items.length > 0) {
new GeoExt.Popup({
title: "Feature Info - (" + items.length + " Results)" + maxFeatures,
width: 400,
height: 300,
layout: "accordion",
autoScroll: true,
map: Map,
location: evt.xy,
items: items
}).show();
}
I'm not sure if there is a way to get it to do what you want as it is without eliminating the height parameter alltogether which will obviously mean it will be taller.
If you want to keep it at that height, you can just throw it inside another panel:
var expandos = Ext.create('Ext.panel.Panel', {
width: 300,
title: 'Accordion with ' + grids.length + ' panels',
layout: 'accordion',
resizable: true,
items: grids
});
Ext.create('Ext.panel.Panel', {
renderTo: 'center_div',
height:400,
width:315,
autoScroll: true,
items:expandos
});
http://jsfiddle.net/SFMpd/2/