I have an item like so (JSFiddle Demo):
{
region: 'west',
title: 'Instead of toolbar',
collapsible: true,
width: 250,
tbar: [{
xtype: 'button',
text: 'Button',
style: {
background: 'green'
},
handler: function() {}
}]
}
I want my tbar instead of the title like (1->2)
I tried to remove title but it's not working. How to do that thanks :).
Get rid of the header and add the same collapse tool to the toolbar:
{
region: 'west',
collapsible: true,
header: false,
width: 250,
tbar: [
{
xtype: 'button',
text: 'Button',
style: {
background: 'green'
},
handler: function (){}
},
'->',
{
type: 'left',
xtype: 'tool',
handler: function(t) {
this.up('panel').collapse();
}
}
]
}
Related
I am creating a menu using Ext.tab.Panel and would like to have Search feature. Something like Bootstrap navbar - https://getbootstrap.com/docs/4.0/components/navbar/
I tried to simply add the textfield element but didn't work obviously.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
});
Is it possible to achieve this at all?
You can archive it with the tabbar config of the Ext.tab.Panel.
The Ext.tab.Bar is a specialized Ext.container.Container where you can add items like a to Textfield.
So add te search textfield to the tabbar config and you can archive what you want to, see the example code below and the Sencha Fiddle.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
],
tabBar: {
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
},
renderTo: Ext.getBody()
});
At first this functionality does not exist in the tabpanel, which I recommend you do and replace the idea of tabpanel to apply a cardlayout which is the same tabpanel layout system.
And then you can use a toolbar, with the buttons being configured with the toogleGroup, in short, you'd better see the code example below working.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'toolbar',
height: 42,
defaults: {
xtype: 'button',
},
items: [{
text: 'Tab1',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 0,
toggleGroup: 'tabHandler',
enableToggle: true,
pressed: true,
margin: '0'
}, {
text: 'Tab2',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 1,
enableToggle: true,
margin: '0'
}, {
text: 'Tab3',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 2,
toggleGroup: 'tabHandler',
enableToggle: true,
margin: '0'
}, '->', {
xtype: 'textfield',
fieldLabel: 'Search:',
labelWidth: 70,
width: 250,
margin: 0
}, {
iconCls: 'x-fa fa-search',
handler: function(){
alert('Your Search here!');
}
}]
}, {
xtype: 'container',
itemId: 'fakeTab',
margin: '16 0 0 0',
flex: 1,
layout: 'card',
defaults: {
xtype: 'container',
height: 800
},
items: [{
html: '<STRONG>TAB 1 your content here</STRONG>'
}, {
html: '<STRONG>TAB 2 your content here</STRONG>'
}, {
html: '<STRONG>TAB 3 your content here</STRONG>'
}]
}]
});
}
});
Working sample here
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();
}
Here my code in sencha for my applicaiton,I have included table and two buttons in resetpanel and addded into tab view
var tab= Ext.create('Ext.List', {
fullscreen: true,
dock: 'left',
width: 320,
height: 200,
ui: 'round',
store: {
fields: ['ext_xtype'],
data: [{
ext_xtype: 'fieldset',
}, {
ext_xtype: 'formpanel',
}]
},
itemTpl: '<span style="width:300px; display:inline-block;">{ext_xtype}</span> '
});
var resetPanel1 = new Ext.form.FormPanel({
id: 'resetPanel1',
style:{background:'#D8D8D8'},
dockedItems:[]
,
items: [tab,{
xtype: 'button',
text: 'Add',
ui: 'confirm',
handler: function() {
view.setActiveItem('welcomepanel', {type:'fade', direction:'left'});
}
},{
xtype: 'button',
text: 'Add',
ui: 'Search',
handler: function() {
view.setActiveItem('welcomepanel', {type:'fade', direction:'left'});
}}]});
var view = Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
scroll:'vertical',
items: [{
title: 'ITEMS',
iconCls: 'star',
layout:'card',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Add Items',
},resetPanel1
]
}]
});
Ext.Viewport.add(view);
}
});
The resetPanel1 is not viewing in tab view.Whats wrong with my code.Please help me to sort it out.
Remove the fullscreen and dock properties from the list, you should have fullscreen : true only in the main view, In your case TabPanel.
var tab= Ext.create('Ext.List', {
width: 320,
height: 200,
ui: 'round',
store: {
fields: ['ext_xtype'],
data: [{
ext_xtype: 'fieldset',
},{
ext_xtype: 'formpanel',
}]
},
itemTpl: '<span style="width:300px; display:inline-block;">{ext_xtype}</span>'
});
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 am trying to add Checkboxes for a Rally Report version 2.00p2.
I defined severals place holders for the filter (releaseFilter and stateFilter)
and Adding the checkboxes at the body of the onReady function at the end.
However, Instead of 5 different checkbox I get 1 and on top of the Release filter.
Sorry But I couldn't add an Image.
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
autoScroll: 'true',
items: [
{
xtype: 'container',
itemId: 'releaseFilter',
style: {
margin: '5px'
}
},
{
xtype: 'container',
itemId: 'stateFilter',
style: {
margin: '5px'
}
},
{
xtype: 'container',
itemId: 'grid',
style: {
margin: '10px',
}
},
// SOME CODE
],
launch: function() {
Rally.data.ModelFactory.getModel({
type: 'UserStory',
success: function(model) {
this.grid = this.add({
xtype: 'rallygrid',
model: model,
columnCfgs: [
'FormattedID',
'Release',
'Iteration',
'PlanEstimate',
'PlanDevEstDays',
'PlanQAEstDays'
],
storeConfig: {
filters: [
{
property: 'ScheduleState',
operator: '=',
value: 'Accepted'
}
]
}
});
this.down('#releaseFilter').add(
{
xtype: 'rallyreleasecombobox'
}
);
this.down('#stateFilter').add([{
xtype: 'menucheckitem',
text: 'Backlog',
floating: 'false'
},{
xtype: 'menucheckitem',
text: 'Defined'
},{
xtype: 'menucheckitem',
text: 'In-Progress'
},{
xtype: 'menucheckitem',
text: 'Completed'
},{
xtype: 'menucheckitem',
text: 'Accepted'
}]
);
},
scope: this
});
}
});
Rally.launchApp('CustomApp', {
name: 'Grid Example'
});
});
The original Entry in your javadoc is:
Ext.create('Ext.menu.Menu', {
width: 100,
height: 110,
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
xtype: 'menucheckitem',
text: 'select all'
},{
xtype: 'menucheckitem',
text: 'select specific',
},{
iconCls: 'add16',
text: 'icon item'
},{
text: 'regular item'
}]
});
What did I do wrong ?
Instead of using menucheckitem, use a standard Ext checkbox. Like this:
this.down('#stateFilter').add([{
xtype: 'checkbox',
fieldLabel: 'Backlog'
},
...
]);
Be sure change it from text to fieldLabel