face to white mark after folding the panel EXTJS - extjs

I have button on the first item of carousel on the Main View.
Button is managed by ButtonController and opens Form.
This form have tools: close, hide. When I click on close or hide tool on the forms after, for example closing I see white artifact. This looks like mark of header of Form..
enter image description here
Maybe this can be decided by trivial action?
Thanks
UPD: some code.
part of controller:
Ext.define('Foresto.view.main.ButtonController', {
extend: 'Ext.app.ViewController',
alias: 'controller.comenuform',
layout: 'vbox',
requires: [
'Foresto.view.forms.1',
'Foresto.view.forms.2',
'Foresto.view.forms.3',
'Foresto.view.forms.4'
],
views: ['Foresto.view.main.Main'],
cutForms: function () {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: 'mainPart',
autoshow: true,
items: [{
xtype: 'formsType4'
}]
})
},
part of form:
Ext.define('Foresto.view.forms.Formf', {
extend: 'Ext.form.Panel',
title: 'testApp',
header: {
cls: 'header-cls',
},
tools: [
{type: 'minimize',
handler: function(){
this.up("panel").hide();
}},
{type: 'save'},
{type:'close',
handler: function(){
this.up("panel").close();
}},
],
xtype: 'formsType4',
url: 'save-form.php',
defaults: {
xtype: 'selectfield',
labelWrap: true,
afterLabelTextTpl: [
'<span style="color:red;font-weight:normal" data-qtip="Required">*</span>'
]
},
items: [{...
and code of main:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:'control-panel',
xtype: 'app-main',
controller:'comenuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
],
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'MyApp'
}
},
tools: [{
type: 'menu',
handler: function(me) {
var cp = me.down('panel');
if (cp._hidden)
cp.show(true);
else
cp.hide(true);
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
layout: {
type: 'vbox',
align: 'middle',
pack: 'center'
},
cls: 'colorful2',
defaults: {
border: true,
ui: 'light',
flex: 1
},
items:[{
xtype:'button',
cls: 'button-cls',
text: 'buttonOfForm4',
id: "RenterId",
margin: 10,
width: 920,
height: 250,
length: 150,
handler: 'renterForms'
... (some other buttons, which call forms too)..

Related

Method for renderTo EXTJS on mainView

I trying renderTo a panel(Ext.panel with title:'titlet' in the end of code) to the mainView ('Foresto.view.main.Main') or to a part of courusel (id:'mapId') But i havn't got a positive result.
So my quistions:
1) How to render panel to the mainview or to a courusel item ('mapId')
2)What mains approaches in Ext JS 6+, modern toolkit, for render object to the mainview or mainview's elements??
Now my code looks like that:
Ext.define('Foresto.view.main.Main', {
extend: 'Ext.form.Panel',
id:"control-panel",
plugins: 'responsive',
responsiveConfig:{
tall:{
tabPosition:'center'
}
},
xtype: 'app-main',
controller:'menuform',
requires: [
'Foresto.view.map.Map',
'Foresto.view.main.ButtonController',
'Foresto.view.forms.LoginRoom'
],
autosize:true,
padding: 0,
id:"bighBox",
header: {
cls: 'header-cls',
title : {
cls : 'header-title-cls',
text : 'FOREST'
}
},
tools: [{
type: 'menu',
handler: function() {
Ext.Viewport.toggleMenu('top');
}
}],
items:[{
xtype: 'carousel',
id: "mainPart",
flex: 1,
defaults: {
border: true,
ui: 'light'
},
items: [{
title: 'MAP',
id:'mapId',
xtype: 'panel',
layout:'vbox',
padding: 0,
items: [{
xtype: 'panel',
title:'PLACEFORMAP'
}]
},{
title: 'REPORTS',
xtype: 'panel',
cls: 'foresBack',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items:[{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT1',
margin:'10px'
},{
xtype:'button',
cls:'threethbutton',
ui: 'confirm',
text:'REPORT2'
}]
}]
}
],
initialize: function() {
Ext.Viewport.add({
xtype:'button',
id:'pan11111',
text:'KAB',
flex:1,
height: 1000,
width: 100,
items:[{
xtype:'tabpanel',
title:'Projects',
layout:'card',
items:[{
xtype:'panel',
title:'11111'
},{
xtype:'panel',
title:'uuuuu'
}]
}]
});
}
}});
now I edit function for rendering panel on viewport. Panel 'pan11111' is rendering, bu viewport cover all other elements, and I can work only with panel and white board viewport, witch cover all classes: –THIS problem was solved by great clearning of coockies

Adding a image in ext tab panel

I am new to ext js.How do i add an image as a logo of my application in the header of ext tab panel?
Following is my code:-
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
defaults: {
styleHtmlContent: true
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'fa-home',
layout: 'fit',
items: [{
xtype: 'mainlist'
}]
}
]
});
I need to add a logo in place of 'myapp' which is appearing as title. I want it something like the below image:-
To Answer this I created a new app in Extjs6 and did some modification which is below to get the logo.
Place the image and css in your resource folder then add below css in your css file.
.my-logo-icon {
background-image: url(../images/newpowered.gif) !important;
}
then place css path in app.json to get the css.
{
"path": "resources/css/styles.css"
}
Now in your code call this css at iconCls
iconCls: 'my-logo-icon'
complete code is
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
ui: 'navigation',
tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,
header: {
layout: {
align: 'stretchmax'
},
title: {
flex: 0
},
iconCls: 'my-logo-icon'
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},
responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
},
defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
},
items: [{
title: 'Home',
iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
xtype: 'mainlist'
}]
}, {
title: 'Users',
iconCls: 'fa-user',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Groups',
iconCls: 'fa-users',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Settings',
iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]});
And out put image is
You can also do it like this:
items : [{
title : "<img src='../resources/images/whatever.png'>",
xtype : 'home-page',
bodyCls : 'menu-tabs' // optional
}, {
}]
and if you want the tab to be a little taller just use this as css
div[class~="menu-tabs"] div[class~="x-box-scroller-body-vertical"] div[class~="x-box-target"] a[class~="x-tab-default"] span[class~="x-tab-wrap-default"] span[class~="x-tab-button-default"]{
height: 50px;
}

How to refresh view panel in Sencha?

This seems elementary, but I need to be able to refresh a view after a Web Service call.
The data on the screen is not tied to a store because it is dynamically built at runtime.
Here is my view:
Ext.define('CAMSApp.view.OpBuyoffView', {
extend: 'Ext.Panel',
alias: ['widget.opbuyoffview'], //ToDo Use I18N
config: {
xtype: 'panel',
cls: 'dialogview formview',
centered: true,
scrollable: 'vertical',
modal: true,
screenId: 'opbuyoffview',
id: 'opBuyoffTableContainer',
layout: {
type: 'vbox',
align: 'center',
},
defaults: {
minHeight: 46
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Buyoffs',
cls: 'grey-bold-34pt',
ui: 'transparent',
items: [{
xtype: 'button',
cls: 'grey-bold-40pt greyBtn',
text: 'Close',
idForAction: 'opbuyoff-cancel_btn',
}, {
xtype: 'spacer',
}],
},
{ id: 'opBuyoffToolbar',
xtype: 'container',
layout: {
type: 'hbox',
align: 'left',
},
items: [
{
xtype: 'button',
cls: 'blueRoundedBtn',
text: 'Buyoff',
idForUpdate: 'opbuyoff-buyoff_btn',
disabled: true
},
{ xtype: 'spacer',
minWidth: 480
}]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
xtype: 'label',
style: 'border:1px solid black',
cls: 'opBuyoffTableHeader',
},
id: 'tabOfBuyoffs',
items: [{
html: '',
minWidth: 60
}, {
html: 'Buyoff',
minWidth: 250
}, {
html: 'Partial %',
minWidth: 100
}, {
html: 'Completed',
minWidth: 120
},
{
html: '',
cls: 'opBuyoffTransparent',
minWidth: 50
}
]
}],
listeners: {
initialize: function(me, eOpts) {
CAMSApp.util.I18N.resolveStaticUIBindings(me);
},
show: function (me, eOpts) {
// Publish the screen id event.
log('[OpBuyoff.show]');
CAMSApp.app.fireEvent('setscreenfocus', this);
},
},
}
});
I have tried reading the View and the Container - but neither elements have doLayout() or refresh() functions.
The containers and panels do have a method called update(Ext.AbstractComponent-method-update) which can be used to update a view's HTML content.
Also, you can use XTemplate for creating the items and bind the panel to a store. In that case you won't have to manually remove and add all the elements.
refresh: function() {
// Ext.StoreMgr.get('stream').load();
// here I'd like to reload the app instead
// not just the store
window.location.reload();
}

How can I make ExtJS 4.2.1 empty grid respect flex layout value?

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);
}
}
}]
}
}]
}]
});
});

Displaying a grid inside the viewport on click - Ext JS

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,
...
}
]
}

Resources