I am new to Ext.js & am having some issues scrolling a nested form on mobile devices. I have a grid panel & a form panel both inside the 'center' panel & I hide one depending on which selection was chosen in west panel. The grid section works fine (& scrolls in mobile thanks to the bufferedrenderer plug-in.) but I can't get the form to. It scrolls fine in desktop view & it even scrolls when I preview the mobile view in Chrome dev tools but when I try to use it on an actual device, there are no scroll bars & I can not drag the screen either. I've tried so many different ways but here's the gist of what I have. Any suggestions are appreciated.
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Container',
plugins: ['viewport', 'responsive'],
xtype: 'app-main',
autoscroll: true,
defaults: {autoscroll: true},
overflowY: 'auto',
responsiveConfig: {
tall: {
layout: {
type: 'auto'
}
},
wide: {
layout: 'border'
}
},
items [{
xtype: 'panel',
region'north'
},{
xtype: 'panel',
region'west'
},{
xtype: 'panel',
region:'center'
autoscroll: true,
layout: 'fit',
items: [{
xtype: grid,
......
},{
xtype: 'form',
layout: 'fit',
height: '500',
autoscroll: true, //this does nothing??
overflowY: auto, //this does nothing either???
responsiveConfig: {
wide: {
layout: 'hbox'
},
tall: {
layout: 'auto'
}
},
layout: {
type: 'box',
align: 'stretch'
},
items: [{
xtype: 'textfield'
},{
xtype: 'textfield'.....
}]
}]
}]
Related
How can I put panel with some text inside navigation view, like here http://joxi.ru/E2pyDJQC9MLnyA
I tried past panel in navigation treelist but panel not displayed.
Also I united my treelist and panel in joint container:
{
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [
{
xtype: 'container',
reference: 'leftContainer',
itemId: 'leftContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
ui: 'navigation',
store: 'NavigationTree',
width: 64,
micro: true,
expanderFirst: false,
expanderOnly: false,
listeners: {
itemclick: 'onNavigationItemClick',
selectionchange: 'onNavigationTreeSelectionChange'
}
},
{
xtype: 'panel',
header: false,
layout: 'fit',
height: 100,
hidden: checkSubscription().hidden,
width : 64,
userCls: 'sidebar-purchase-wrapper',
renderTo: Ext.get("leftContainer"),
html :
'My text Here'
},
{
xtype: 'container',
flex: 1,
reference: 'mainCardPanel',
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}
]
}
Panel displayed, but when I'm click button onToggleNavigation animation not work correct.
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 trying to resize windows in ExtJS 6, and they resize fine, but I would like to resize them whilst maintaining the aspect ratio, but so far after an extensive google search and trying many options, I cannot seem to find a solution.
I have a simple window with two panels in with textfield in one and a button in the other to begin with whilst I figure this out - below is a sample of the code in which I am trying to apply this to.
Ext.define('SenchaApp.view.MainView', {
extend: 'Ext.window.Window',
autoShow: true,
height: 600,
width: 600,
constrainHeader: true,
title: 'Main View',
items:[{
xtype: 'panel',
height: 200,
width: 600,
items:[{
xtype: 'displayfield',
text: 'my button'
}]
},
{
xtype: 'panel',
height: 200,
width: 600,
items:[{
xtype: 'button',
text: 'my button'
}]
}
]
});
Use the resizable config in your window which can be a config object of Ext.resizer.Resizer. The Resizer class has a preserveRatio config for exactly what you want.
resizable: {
preserveRatio: true
}
Here's a fiddle to demonstrate:
https://fiddle.sencha.com/#fiddle/11rh
I wish to have the same form panel in each tab of the tabbed pannel. Is there a way that the same code is run for each tab without having to copy the code in the items list since that would be redundant.
Here is one way to do it -
You'll normally define a tabpanel and you give multiple panels as an array of items. For each of the panel inside the item, give the same panel container that you define below as the item.
{
xtype: 'tabpanel',
itemId: 'myTabPanel',
activeTab: 0,
plain: true,
items: [{
xtype: 'panel',
itemId: 'tab1',
layout: 'fit',
title: 'Strategies',
items: [{
xtype: 'myTabContainer'
}],
tabConfig: {
xtype: 'tab',
closable: false
}
}, {
xtype: 'panel',
itemId: 'tab2',
layout: 'fit',
title: 'Action Sets',
items: [{
xtype: 'myTabContainer'
}]
}],
listeners: {
tabchange: 'tabChangeListener' // define this and handle the actions for your tab change event
}
}
And here is a sample definition of the container/content for the tab. You can note that I'm using the alias for this container "myTabContainer" as xtype in each of the tabs above. This will make sure that the same view is linked to both the tabs.
Ext.define('MyTabContainer', {
extend: 'Ext.panel.Panel',
alias: 'widget.myTabContainer',
requires: [
// give all required classes
],
viewModel: {
type: 'dfstrategiesmaincontainer'
},
itemId: 'tabContent',
layout: 'border'
// Define all other required items and contents
}
Define a form and set that form as an item in each tab.
//Define the form
Ext.define('App.view.MyForm', {
extend:'Ext.form.Panel',
alias: 'widget.myform',
bodyPadding:10,
items: [....]
});
//Use the form as an item in each tab
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Tab1',
xtype: 'myform'
}, {
title: 'Tab2',
xtype: 'myform'
}]
});
I need to popup an aspx page in a Extjs Popup window.For popup I am using Ext.Window.
Can someone help me how can I popup an Aspx page using Ext.Window?
Thanks in Advance.
You can add an iframe to the window. Here's an example derived from something i did recently:
Ext.define('App.view.myWindow', {
extend: 'Ext.window.Window',
title: 'My Window',
xtype:'myWindow',
itemId: 'myWindow',
width: 1500,
height:800,
items: [{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'box',
itemId: 'iFrameInWindow',
title: 'IFrame',
autoEl: {
tag: 'iframe',
src: 'about:blank'
},
flex: 1
}]
}]
});