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,
...
}
]
}
Related
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)..
cannot find answer (
Ext.define('Cabinet.view.main.Main', {
extend: 'Ext.Container',
...
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Sliding Menu',
items: [
{
xtype: 'button',
id: 'listButton',
iconCls: 'x-fa fa-bars',//list //x-fa fa-mortar-board
ui: 'plain',
listeners : {
tap: 'OnToggle'
}
}
]
},
{
xtype: 'container',
flex: 1,
itemId: 'contentPanel',
reference: 'mainCardPanel',
scrollable: 'y',
layoutConfig:{layoutOnCardChange:true},
layout: {
type: 'card',
anchor: '100%'
}
}
],
,
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
this.callParent();
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
width: 250,
defaultListenerScope: true,
scrollable: 'vertical',
controller: 'main',
ViewModel :
{
},
items: [
{
xtype: 'button',
text: 'asd',
viewName: 'acadPerf',
controller: 'main',
listeners : {
tap: function ()
{
if (Ext.Viewport.down('#contentPanel').getActiveItem() != 0) {
Ext.Viewport.down('#contentPanel').getActiveItem().destroy();
}
newView = Ext.create({xtype: this.viewName});
Ext.suspendLayouts();
Ext.Viewport.down('#contentPanel').setActiveItem(newView);
Ext.resumeLayouts(true);
load store
Ext.define('Cabinet.view.charts.acadPerf', {
extend: 'Ext.container.Container',
xtype: 'acadPerf',
viewModel: {
// type: 'charts'
},
layout: 'fit', //responsivecolumn
defaults: {
defaults: {
animation : !Ext.isIE9m && Ext.os.is.Desktop
}
},
listeners: {
render: function () {
this.down('grid').getStore().reload();
}
},
items: [
{
xtype: 'panel',
cls: 'faq-left-sidebar shadow',
header: false,
ui: 'light',
layout: 'fit',
responsiveConfig: {
'width < 1000': {
width: 0,
visible: false
},
'width >= 1000 && width < 1600': {
width: 230,
visible: true
},
'width >= 1600': {
width: 300,
visible: true
}
},
items: [
{
xtype:'grid',
reference: 'mainCardPanel',
store: 'acadPerfStore',
hideHeaders: true,
columns: [
{
text: 'asd',
xtype: 'gridcolumn',
flex: 1,
dataIndex: 'CONTROL_FORM',
cell: {
encodeHtml: false
},
renderer: 'renderTitleColumnAcademPerf'
},
]
}
]
}
],
...
when i at first time click to show menu and then tap on first button - all ok.
renderer work. I see all records.
but when i click once again to show menu and click on first button - i see only content of one record from store. but the size of verical scroll of grid is like all records rendered. in html i see only one record.
What's wrong?
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;
}
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();
}
I just want to get active tab on 'save' button click in extjs code.
my code is given below:
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.define('WebCare.UI.RoleManagerAdminWindow', {
extend: 'Ext.window.Window',
id: 'rolemanageradminwindow',
modal: true,
title: 'Manage Role & Permission',
closable: true,
closeAction: 'hide',
width: 600,
height: 550,
minWidth: 700,
minHeight: 200,
layout: 'border',
bodyStyle: 'padding: 5px;',
listeners: {
show: function (sender, eOpts) {
var self = sender;
vent.trigger("WindowLoad");
}
},
items: [
{
id: 'rolemanageradmintab',
region: 'center',
xtype: 'tabpanel',
constructor: function (config) {
var self = this;
self.callParent(config);
},
items: [
{
xtype: 'rolemanagereditor',
id:'1'
},
{
xtype: 'agencyeditor',
id: '2'
}
],
listeners: {
'tabchange': function (tabPanel, tab) {
}
}
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: { minWidth: 70 },
style: {
background: "#d6e3f3"//, "#d9ebff",
},
height: 40,
items: [
{ xtype: 'component', flex: 1 },
Ext.create('Ext.button.Button', {
height: 25,
text: 'Close',
disabled: false,
handler: function () {
this.up('.window').close();
}
}),
Ext.create('Ext.button.Button', {
height: 25,
text: 'Save',
disabled: false,
handler: function () {
}
})
]
}
]
});
A simple example to get the active tab in the tabpanel when you click Save button.
Ext.onReady(function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html: 'A simple tab'
},
{
title: 'Tab 2',
html: 'Another one'
},
{
title: 'Tab 3',
html: 'Another one'
}
],
buttons: [
{
text: 'Save',
handler: function() {
var activeTab = tabPanel.getActiveTab();
alert("The active tab in the panel is " + activeTab.title);
}
}
],
renderTo: Ext.getBody()
});
});