var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Tab 1003',
iconCls: 'tabs',
href:'http://www.yahoo.com',
//hrefTarget:'_self',
//html: 'Tab Body<br/><br/>' + Ext.example.bogusMarkup,
closable: true
}],
.....
i have add a code href:'http://www.yahoo.com' into items inside, but still can't work,
how to open www.yahoo.com page in the Tab Panel?
You could add a new panel to the tab-panel with an iframe in the html attribute.
Related
I have a panel which contains items in its body, and I would like the panel itself to be draggable, but only when the user drags the panelheader. (I don't want the user to be able to drag the panel by clicking and dragging in the body). Is there a simple way to do this?
Here is my code for creating the panel:
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: true,
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
EDIT: I was able to figure out the problem and correct it. The solution has to do with the handle property of the Ext.drag.Source object. You have to specify the CSS handle of the element you want to be able to initiate the drag. In My case, the corrected code is as follows.
const newGridPanel = Ext.create({
xtype: 'panel',
id: newpanelid,
floated: true,
closable: true,
draggable: {handle: 'x-panelheader'}, // <- This is the part that needed to be changed
scrollable: true,
width: 400,
height: 300,
resizable: {
constrainToParent: true,
dynamic: true,
edges: 'all',
minSize: 250,
maxSize: [window.innerWidth,window.innerHeight]
},
layout: 'fit',
title: 'Title',
tools: [
{
iconCls: 'x-fa fa-plus',
reference: 'addempbtn',
handler: function() {
newGridPanel.down(xt).getController().onAdd()
},
tooltip: 'Add a New Employee'
}
],
defaults: {
flex: 1
},
items: [
{
xtype: xt,
id: newgridid,
}
]
});
newGridPanel.setX(20);
newGridPanel.setY(20);
newGridPanel.show();
I need some help about a form with a textarea field.
My problem.
I have a simple Ext.window in which I have put an Ext.FormPanel. In this Ext.FormPanel I have put an Ext.form.FieldSet in which I have put some fields. One of these field is a textarea (Ext.form.TextArea),
Now, my objective is to render responsive this textarea when I resize the Ext.window.
It is possible to obtain this behavior?
This is my current code:
Window in which reside the Ext.FormPanel
var win = new Ext.Window({
id:'winTest',
layout:'fit',
modal:true,
title:'Title',
width:590,
height:300,
closeAction:'close',
plain: true,
autoScroll: true,
items:[form],
listeners: {
'beforeclose': function (p) {
}
}
});
Ext.FormPanel in which reside the Ext.form.FieldSet
var form = new Ext.FormPanel({
id:'FormTest',
layout : 'form',
width:510,
labelAlign: 'right',
labelWidth: 120,
autoScroll:true,
bodyStyle:'padding:2px;background-color:#E9EFF8;',
monitorValid:true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad:true,
items: [fieldset]
});
Fieldset in which I have put some fileds
var fieldset = Ext.form.FieldSet({
id:'fsTest',
autoHeight: true,
defaultType: 'textfield',
items:[.....,textarea]
//boxMaxWidth:450
//border:true
})
Textarea putted in the fieldset (to shorted, I have reported only the textarea)
var textarea = new Ext.form.TextArea({
id:'textareaTest',
name:'TextArea',
fieldLabel:'Insert',
hidden:false,
width:310,
height:60,
maxLength:500,
allowBlank: true
});
Thanks for any precious help.
Lorenzo.
It should be like this:-
var win = new Ext.Window({
id: 'winTest',
layout: 'vbox',
modal: true,
title: 'Title',
width: 590,
height: 300,
closeAction: 'close',
plain: true,
autoScroll: true,
items: [{
xtype: 'form',
id: 'FormTest',
flex: 1,
layout: 'vbox',
width: 510,
labelAlign: 'right',
labelWidth: 120,
autoScroll: true,
bodyStyle: 'padding:2px;background-color:#E9EFF8;',
monitorValid: true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad: true,
items: [{
xtype: 'fieldset',
id: 'fsTest',
//autoHeight: true,
flex: 1,
layout: 'vbox',
//defaultType: 'textfield',
items: [{
xtype: 'textarea',
flex: 1,
id: 'textareaTest',
name: 'TextArea',
fieldLabel: 'Insert',
hidden: false,
width: 310,
//height: 60,
maxLength: 500,
allowBlank: true
}]
//boxMaxWidth:450
//border:true
}]
}]
}).show();
Please have a look at this example
I have an iframe (fit in a window) to load before showing it.
When I do :
window.show();
window.hide();
The window is not hidden. "window.show()" is used to render the iframe.
The loading of the iframe is about 10 sec.
How can I render the iframe without display the window?
My window :
var win = Ext.create('Ext.window.Window', {
height: '95%',
width: '95%',
modal: true,
header: false,
hideMode:'visibility',
constrain: true,
resizable:false,
itemId:'winIframeItemId....',
id:'winIframeId....',
baseCls: 'x-window-....',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle',
pack: 'end'
},
items: [{
xtype: 'button',
cls: 'x-button-close-window...',
height: 34,
width: 34
...
}]
}, {
xtype: 'container',
itemId:'conIframeWindow',
layout:"fit",
flex: 1,
items: [{
xtype: 'component',
autoScroll: true,
itemId:'IframeTest',
baseCls: 'x-component-w....',
autoEl: {
tag: "iframe",
domain: '....',
frameborder: 0,
src: url
}
}]
}]
});
Windows and menus are typically rendered to the document body. I was able to use the Ext.Component.renderTo configuration to render windows and menus without displaying them.
https://fiddle.sencha.com/#view/editor&fiddle/2f5h
// Render a hidden window.
var window = Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
title: 'Window'
});
// Render a hidden menu.
var menu = Ext.create('Ext.button.Button', {
menu: {
items: [{
text: 'Item'
}],
renderTo: Ext.getBody()
},
text: 'Button'
});
I am using accordion layout, the data from the store loading fine for the collapsed items and we can see when it is expanded but for the items collapse: false,data is not loading.It is working fine on Firefox,but not working on Chrome and iOS simulator Can anyone please help me on this issue. I am using latest sencha touch version 2.2.1
here is my code
config: {
title: 'Check out',
iconCls: 'truck',
layout: {
type: 'accordion',
toggleOnTitlebar: true,
mode: 'MULTIPLE',
},
scrollable: 'vertical',
items: [{
itemId: 'cartitems',
title: 'Cart Items List',
height: 600,
layout: 'fit',
collapsed: false,
items: [{
xtype: 'list',
scrollable: {
direction: 'vertical',
directionLock: true
},
itemTpl: '<div class="cartitemlist">{DESCRIPTION} Item ID:{REDID} Price:{Price}</div>',
store: 'CartStore'
}]
}
data is showing up if the collapsed : true .. but it is not working when collapsed: false
Try adding a height to the list view. E.g.
items: [{
xtype: 'list',
height: 500,
scrollable: {
direction: 'vertical',
directionLock: true
},
itemTpl: '<div class="cartitemlist">{DESCRIPTION} Item ID:{REDID} Price:{Price}</div>',
store: 'CartStore'
}]
I'm getting started on Ext using Ext JS 4 and I'm running with a strange behavior on Google Chrome.
I have a viewport with a fit layout. Inside it, I have a panel with a border layout.
It has a southern region, a western region, and a central region.
The western region has a tabpanel, and inside the first tab I have an accordion panel.
The problem is that when I collapse a panel, or reduce the size of the western region, in Chrome I get evil slider bars. On firefox it works just fine, it only happens in Chrome.
It doesn't happen when I'm on the tab 2 (the one that doesn't have the accordion panel).
Any idea of what could be the problem?
These are pictures depicting the problem: http://imgur.com/a/vgbcE
Here is the source code:
Ext.application({
name: 'HelloExt',
launch: function()
{
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'fit',
renderTo: 'layout'
});
var mainLayout = Ext.create('Ext.panel.Panel', {
width: 'auto',
layout: 'border',
title : 'Gis Web',
collapasible: true,
defaults: {
split: true,
border: false,
collapsible: true,
manageOverflow: 2
},
items: [
{
region: 'center',
collapsible: false,
id: 'center-panel',
border: true
},
{
id: 'south-panel',
region: 'south',
height: 100
},
{
id: 'west-panel',
region: 'west',
width: 200,
layout: 'fit'
}
]
});
var accordionPanel = Ext.create('Ext.panel.Panel', {
id: 'accordion-panel',
layout: 'accordion',
tabBar: {
plain: true
},
border: false,
items: [
{
id: 'accordion-1',
title: '1'
},
{
title: '2'
}
]
});
var tabPanel = Ext.createWidget('tabpanel', {
activeTab: 0,
defaults: {
autoScroll: true,
border: false
},
layout: 'fit',
items: [
{
id: 'tab-1',
title: 'Tab 1',
layout: 'fit'
},
{
layout: 'fit',
title: 'Tab 2'
}
]
});
Ext.getCmp('tab-1').add(accordionPanel);
var panel = Ext.getCmp('west-panel');
panel.add(tabPanel);
viewPort.add(mainLayout);
}
});
Try this for west panel :
{
id: 'west-panel',
region: 'west',
width: 200,
title: 'west panel',
xtype: 'tabpanel',
activeTab: 0,
defaults: {
//autoscroll removed !!!
//autoScroll: true,
border: false
},
items: [
{
id: 'tab-1',
title: 'Tab 1',
layout: 'fit'
},
{
layout: 'fit',
title: 'Tab 2'
}
]
}