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.
Related
I'm trien to make a resizable panel layout. I've made a fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/3c94
Why can't I use the resizer between test1 and test2 while the resizer between test3 and test4 is working.
I tried adding flex/fit to a few container, tried removing unimportant stuff, can't find a solution.
Because you have used fit layout in the first panel and hbox (it works) in the second one:
Ext.create('Ext.form.Panel', {
xtype: 'main_customer',
itemId: 'main_customer',
renderTo: Ext.getBody(),
flex: 1,
items: [{
xtype: 'panel',
itemId: 'maincontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
padding: 0,
scrollable: true,
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
height: '63%',
resizable: {
split: true,
edges: ['south']
},
items: [{
xtype: 'panel',
resizable: {
split: true,
edges: ['east'],
},
items: [{
xtype: 'panel',
html: 'test 1',
}]
}, {
xtype: 'panel',
html: 'test 2',
}]
}, {
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
width: '50%',
resizable: {
split: true,
edges: 'east'
},
html: 'test 3',
}, {
xtype: 'panel',
html: 'test 4',
}]
}]
}],
collapsible: false
});
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'
});
SOLUTION:
To better show the problem our actual code was facing, the following code works.
The keys for me to get this to work were to give border layout an 'align' config of stretch, and to ensure that containers had 'flex' config of 1 where necessary.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{text: 'First Name'}],
store: Ext.create('Ext.data.Store', {fields: ['fname']})
});
Ext.define('MyView', {
extend: 'Ext.container.Container',
alias: 'widget.myView',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myGrid',
title: 'My First Grid',
flex: 7,
bodyStyle: {
backgroundColor: '#ff0000'
}
}, {
xtype: 'myGrid',
title: 'My Second Grid',
flex: 3,
bodyStyle: {
backgroundColor: '#0000ff'
}
}]
});
Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
layout: {
type: 'border',
align: 'stretch'
},
items: [{
xtype: 'container',
region: 'center',
itemId: 'gridsContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'myView',
flex: 1
}]
}]
}]
});
});
ORIGINAL POST:
In the code below, if you replace:
Ext.create('Ext.container.Container'
with:
Ext.create('Ext.container.Viewport'
The grids correctly occupy 70%/30% of the available area.
But when the code has Container and not Viewport, the grids are very small.
Of course my real code is within a larger application, so I cannot use a Viewport at that point, I must use container.
Ext.define('MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
columns: [{
text: 'First Name',
dataIndex: 'fname'
}],
store: Ext.create('Ext.data.Store', {
fields: ['fname']
})
});
Ext.onReady(function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
autoScroll: true,
bodyPadding: 0
},
items: [{
xtype: 'myGrid',
itemId: 'grid1',
flex: 7
}, {
xtype: 'splitter'
},{
xtype: 'tabpanel',
itemId: 'mypanel',
width: 400,
height: 400,
renderTo: document.body,
flex: 3,
scroll: true,
resizable: false,
activeTab: 0,
items: [{
xtype: 'myGrid',
itemId: 'tabgrid1',
title: 'My Grid Tab One'
},{
xtype: 'myGrid',
itemId: 'tabgrid2',
title: 'My Grid Tab Two'
}],
tabBar:{
//plain:true,
items:[{
xtype: 'tbfill'
},{
text:'????',
xtype:'image',
src: 'panelCollapseBtn.png',
closable: false,
listeners:{
'afterrender':function (comp) {
comp.getEl().on('click', function (el) {
// alert(comp.up('#mypanel').getCollapsed());
var panel = comp.up('#mypanel');
var isCollapsed = panel.getCollapsed();
//alert('is collapsed: ' + isCollapsed);
panel.header = !isCollapsed;
//panel.collapsible =isCollapsed;
comp.setSrc(isCollapsed?"panelCollapseBtn.png":"panelExpandBtn.png");
panel.toggleCollapse();
}, this);
comp.getEl().on('mouseover', function (el) {
el.target.style.cursor = "pointer";
}, this);
}
}
}]
}
}]
}]
});
});
What I'm trying to do is add a grid that is 65% width of the panel created in my app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [ 'Metadata', 'Print', 'Export' ],
launch: function() {
var types = Ext.create('AM.store.Type');
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 1000,
height: 600,
title: '<center>MetaCenter</center>',
layout: 'hbox',
style: { marginLeft: 'auto', marginRight: 'auto' },
items: [
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
items: [
...
{ xtype: 'button', text: 'Search',
listeners: {
click: function() {
console.log('Search Button clicked');
//Code to create panel view?
}
},
],
}
I'm not explicitly creating a viewport, so I don't believe I could do a viewport.add('grid') function, but I'm not sure. Any ideas?
You could add the grid when creating the container, with hidden: true, then show it when the button is clicked:
{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
flex: 0.35,
items: [
...
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(btn) {
btn.up('panel').nextSibling().show();
}
}
}
]
},
{
xtype: 'grid',
flex: 0.65,
hidden: true,
...
}
]
}
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.