I have a Tab Panel and in that i have added a grid Panel. Now when i re-size my browser window (as in make it small), i want the grid columns and all other components to be shrinked and adjust the sizes so it would show the view in any window size. how can i do this ?
I am using sencha-architect2
Ext.define('App.view.ExView', {
extend: 'Ext.tab.Panel',
autoRender: true,
autoShow: true,
frame: true,
height: 600,
id: 'mainpanel',
width: 1360,
maintainFlex: false,
suspendLayout: false,
hideCollapseTool: false,
title: 'Example Project',
titleCollapse: false,
activeTab: 0,
plain: true,
fullscreen: 'true',
GRID
items: [
{
xtype: 'gridpanel',
autoShow: true,
height: 100,
minHeight: 40,
minWidth: 50,
autoScroll: true,
title: 'Grid',
store: 'storegrid',
layout: {
type: 'fit'
},
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
maintainFlex: false,
dataIndex: 'name',
flex: 1,
text: 'name'
},
{
xtype: 'gridcolumn',
maintainFlex: false,
dataIndex: 'age',
flex: 1,
text: 'age'
}
]
}
]
}
]
});
use anchor layout to your container
This is a layout that enables anchoring of contained elements relative to the container's dimensions. If the container is resized, all anchored items are automatically rerendered according to their anchor rules.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Anchor
Related
How can I use this to show by a div:
Html
<div class='clickable'>Tap me</div>
JS code (tap is connected to the div element above)
tap : function(e) {
overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
However this is a nightmare, I'll get these errors with e.getTarget() or e.target, it does work with .show() but its positioning is then wrong. What is the correct way to do this?
Uncaught TypeError: Object #<HTMLTableCellElement> has no method 'getPageBox'
You probably want to use event delegation on your HTML div tag. So you can give your div tag an id:
<div class='clickable' id='myId'>Tap me</div>
listeners : {
tap: {
fn: function() {},
element: 'element',
delegate: '#myId'
}
}
You can hack it by overlaying an invisible Ext.Button over your html div! You'll just have to add a painted function to render the new button...
tpl: '<div class='clickable'>Tap me</div>'
.......
listeners: {
painted : function(){
var clickable = Ext.DomQuery.select('.pageClass .clickable')[0];
var invisibleButton = new Ext.Button({
text: 'whatever',
renderTo: clickable,
cls: 'something',
width: '100%',
// set styles as transparent bg, no border etc...
handler: function(){
var overlay = Ext.Viewport.add({
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(this);
}
});
}
}
Tested and working.
You need to do it like this:
tap : function(e) {
var overlay = Ext.create('Ext.Panel', {
xtype: 'panel',
left: 0,
top: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%',
html: 'STUFF!!',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Overlay Title'
}
]
});
overlay.showBy(e.getTarget());
}
That is to say, do not add to viewport ... create the panel instead.
So I'm using ExtJS 4.1. I have a viewport that contains two items. They are stacked correctly but I want to put some space between them. Margins don't seem to work.
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.onReady(function() {
Ext.QuickTips.init();
window.formPanel = Ext.widget({
bodyPadding: '5 5 0',
collapsible: false,
defaultType: 'textfield',
frame: true,
id: 'formPanel',
layout: 'form',
renderTo: '',
title: 'Spring Demo 3 (Lookup Transfer Request)',
url: contextPath + '/users/ajax',
width: 450,
xtype: 'form',
buttons: [{
text: 'Check Status',
scope: this,
handler: function() {
formPanel.getForm().submit({
success: function(res, req) {
}
});
}
}],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 105
},
items: [{
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'Username',
name: 'username',
value: ''
}, {
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'TXID',
name: 'txid',
value: ''
}]
});
window.resultsPanel = Ext.widget({
items: [{
id: 'labMessage',
margin: '0 0 0 10',
text: 'Waiting....',
xtype: 'label'
}],
title: 'Results',
xtype: 'panel'
});
window.viewPort = Ext.widget({
items: [formPanel, resultsPanel],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
margins: '10 10 10 10',
padding: '10 10 10 10',
renderTo: 'container',
xtype: 'viewport'
});
});
The Ext.layout.container.VBox layout has the padding and defaultMargins configs that will apply the respective styles to child components. I have no idea why the naming is inconsistent, but that's what the docs say.
Looking at your sample code, it looks like you're applying your margins to the wrong components. If you want spacing between your panels, put the margin/padding settings on the panels themselves instead of on their container.
window.resultsPanel = Ext.widget({
xtype: "panel",
title: "Results",
margin: "10 0 0 0", // Same as CSS ordering (top, right, bottom, left)
items: [{
xtype: "label",
id: "labMessage",
margin: "0 0 0 10",
text: "Waiting..."
}]
});
There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).
My code is as follows; and it doesn't work the way i want it to. can some one look into this
Ext.define('MyApp.view.MyView', {
extend: 'Ext.form.Panel',
alias: 'widget.myview',
frame: true,
height: 800,
hidden: false,
hideMode: 'visibility',
id: 'myviewid',
autoScroll: false,
bodyPadding: 5,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 330,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Care Fusion User Login',
anchor: '250 250',
items: [{
xtype: 'textfield',
id: 'name',
width: 233,
name: 'name',
fieldLabel: 'Nmae',
growMax: 200,
x: 10,
y: 30
} {
xtype: 'button',
height: 30,
width: 256,
text: 'Click',
x: 240,
y: 110
}]
}]
});
me.callParent(arguments);
}
});
Try to use following layout in your outer container:
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
then you inner form will be placed in the center of this outer form.
I have added a Panel (i call it My Panel 1), and another panel within this panel (I call it My Panel 2), and then added a grid into the 2nd panel (to My Panel 2). When i click on the Restore Down or the re-sizing button of the browser, it doesn't shrink the components to fit the screen size. How can i solve this ?
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 469,
width: 729,
title: 'My Panel 1',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'panel',
height: 238,
title: 'My Panel 2',
items: [{
xtype: 'gridpanel',
height: 179,
title: 'My Grid Panel 1',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
}, {
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}, {
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
}, {
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}],
viewConfig: {
}
}]
}]
});
me.callParent(arguments);
}
});
I would suggest using a viewport - it automatically adjusts to the "view port" of your browser :)
Also do not set fixed width and height if you want them to be managed automatically.
Here is a sample: http://jsfiddle.net/dbrin/gWaCv/embedded/result/
I'm trying to dynamically add a component to a container with the hbox layout specified
and have that container re-size itself to accommodate the new component. Currently the
new component is added, but the new and old components are re-sized / or tiled in the
container and the container maintains its size.
Here is a demonstration of the issue I'm having on jsfiddle.
Here is the relevant extjs4 javascript for the demo:
Ext.onReady(function(){
Ext.create ('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
items: [
{
xtype: 'container',
layout: 'hbox',
padding : 5,
items: [
{
xtype: 'container',
id: 'textfieldgroup',
flex: 1,
height: '100%',
border: false,
layout: {
type: 'vbox',
},
defaults: {
flex: 1,
},
items: [
{
xtype: 'textfield',
emptyText: 'type here',
},
],
},
{
xtype: 'button',
flex: .1,
text: '+',
listeners: {
'click' : function () {
var textFieldGroup =
Ext.ComponentQuery.query ('#textfieldgroup')[0];
var newTextField = Ext.widget ('textfield');
textFieldGroup.add (newTextField);
},
}
}
]
}
],
renderTo: Ext.getBody ()
});
});
I have found a suitable solution and my reasoning is that you cannot have a vbox dynamically expand within an hbox container. The added benefit is that this method enables you get rid of one level of nesting. Also using the layout property autoSize: true enables the vbox container to expand and dynamically re-size itself.
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
flex: 1,
title: 'Group of fields',
width: '100%',
items: [
{
xtype: 'container',
layout: 'hbox',
width: '100%',
items: [
{
flex: 1,
xtype: 'label',
text: 'Fields',
},
{
xtype: 'button',
flex: 1,
text: '+',
listeners: {
'click': function() {
var textFieldGroup =
Ext.ComponentQuery.query('#textfieldgroup')[0];
var newTextField = Ext.widget('textfield');
textFieldGroup.add(newTextField);
},
}}
]
},
{
xtype: 'container',
layout: {
type: 'vbox',
autoSize: true,
},
id: 'textfieldgroup',
defaults : {
// flex: 1,
},
items : [
{
xtype: 'textfield',
emptyText: 'type here',
}
]
}
]}
],
renderTo: Ext.getBody()
});
});