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
I am working on Ext JS 6.5 modern. I have some condition to disable the grid component, user has only rights to view the grid no one else.
I have tried disabled config and disable method but not working. Here is my Fiddle.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
disabled: true,
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
//IT is also not working
this.up('grid').setDisabled(true);
this.up('grid').disable();
}
}
}]
//renderTo:Ext.getBody()
});
}
});
Somebody please help me with a solution for disabling the grid component.
As a workaround we can use grid.setMasked(true);
Here is the example Fiddle.
Another approach is to set grid's hideMode to opacity and then set it to hidden (this.up('grid').setHidden(true);).
For Example (editing your fiddle)
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
//disabled: true,
hideMode: 'opacity',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
this.up('grid').setHidden(true);
}
}
}]
//renderTo:Ext.getBody()
});
Also you need this css override:
<style>
.x-hidden-opacity {
opacity: 0.2 !important; //default is 0
pointer-events: none;
}
</style>
This is my popup with tabs.
I need to give a value from record to gridpanel in tab 2 in store to get attributes from server side by category_id. Searched answer in official documentation and didn't find.
Can help me somebody?
Ext.define('desk.view.CategoryPopup', {
extend: 'Ext.window.Window',
alias: 'widget.categorypopup',
title: 'Change Category',
layout: 'fit',
autoShow: true,
bdoyPadding: 10,
initComponent: function(){
this.items = [{
xtype: 'tabpanel',
items: [
{
xtype: 'form',
title: 'Add / Edit / Delete Category',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Parent Category'
},
{
xtype: 'textfield',
name: 'new',
fieldLabel: 'New Category'
},
{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Category ID',
hidden: true
},
{
xtype: 'textfield',
name: 'parent',
fieldLabel: 'Parent ID',
hidden: true
}
],
bodyPadding: 10
},
{
xtype: 'gridpanel',
alias: 'widget.categoryattr',
title: 'Attributes',
height: 350,
buttons: [{'text': 'Add attribute', 'action' : 'add-attribute'}],
columns: [
{
name: 'Name',
dataIndex: 'name'
}
],
width: 300,
store: Ext.widget('categoryattributes')
}
]
}];
this.buttons = [
{
text: 'Update',
action: 'add'
},
{
text: 'Delete',
action: 'delete'
}
];
this.callParent(arguments);
}
})
This is function in controller
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
}
you need something like this:
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
Ext.Ajax.request({
url: '/api/category/'+ record.getId() +'/attributes', //example url insert your webservice
success: function(response){
var attributes = Ext.decode(response.responseText);
view.down('grid').getStore().loadData(attributes);
}
});
}
you will need a store with a model for your grid.
I want a help for performing checkevent in a check box. Here is my code:
View.js:
Ext.define('AM.view.shop.Bill',
{
extend: 'Ext.form.Panel',
alias : 'widget.bil',
title: 'Complete Check Out',
defaultType:'textfield',
initComponent: function() {
this.items= [
// Mailing Address
{ xtype: 'fieldset',
title: 'Mailing Address',
defaultType: 'textfield',
layout: 'anchor',
width:520,
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Street Address',
name: 'mailingStreet',
billingFieldName: 'billingStreet',
allowBlank: false
},
{ xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'mailingCity',
id:'mailingCity',
billingFieldName: 'billingCity',
flex: 1,
allowBlank: false
}]
}]
},
// Billing Address
{
xtype: 'fieldset',
title: 'Billing Address',
layout: 'anchor',
width:520,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'checkbox',
name: 'billingSameAsMailing',
boxLabel: 'Same as Mailing Address?',
hideLabel: true,
checked: true,
style: 'margin-bottom:10px',
id:'billingSameAsMailing',
},
{ xtype: 'textfield',
fieldLabel: 'Street Address',
name: 'billingStreet',
//style: 'opacity:.3',
disabled: true,
allowBlank: false
},
{ xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'billingCity',
id:'billingCity',
style: (!Ext.isIE6) ? 'opacity:.3' : '',
flex: 1,
disabled: true,
allowBlank: false
}]
}]
}]
this.callParent(arguments);
}
});
controller.js:
Ext.define('AM.controller.Shops', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'bil textfield[name=mailingCity]' : {
change: function(textField) {
var formpanel = Ext.ComponentQuery.query('bil')[0];
var copyToBilling = formpanel.down('[name=billingSameAsMailing]').getValue();
if (copyToBilling) {
var city=formpanel.down('[name=mailingCity]').getValue();
formpanel.down('[name=billingCity]').setValue(city);
}
}
},
'bil checkbox[name=billingSameAsMailing]': {
check: function(item, checked) {
alert(item);
}
}
});
}
});
I use the same method of textbox, to get a particular checkbox for performing event on
that checkbox. In textbox it's working correctly but in the case of checkbox it does not respond.
You just try the following code.It works For me.
item.checked = true;
I have an actioncolumn in a grid. I used to open a window after i clicked on this but now do we want to open a new tab in the tabpanel instead of the windows. This is the tab i want to generate when someone clicks on the actionpanel:
Ext.define('MyApp.view.MyTabPanel2', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytabpanel2',
closable: true,
title: 'Report {name}',
activeTab: 1,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'textfield',
fieldLabel: 'Reference',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'From',
labelAlign: 'top'
},
{
xtype: 'datefield',
fieldLabel: 'To',
labelAlign: 'top'
},
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Open report'
},
{
xtype: 'button',
text: 'Save report'
},
{
xtype: 'button',
text: 'Export report'
},
{
xtype: 'button',
text: 'Refresh data'
}
]
}
],
items: [
{
xtype: 'gridpanel',
title: 'Grid',
forceFit: true,
store: 'resultStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ccuDesignation',
text: 'CCU Designation'
},
{
xtype: 'gridcolumn',
dataIndex: 'carrierName',
text: 'Carrier Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'dataPackageName',
text: 'Data package name'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesRx',
text: 'bytesRX'
},
{
xtype: 'gridcolumn',
dataIndex: 'bytesTx',
text: 'bytesTX'
}
],
viewConfig: {
}
},
{
xtype: 'panel',
title: 'Chart',
dockedItems: [
{
xtype: 'chart',
height: 250,
animate: true,
insetPadding: 20,
store: 'resultStore',
dock: 'top',
axes: [
{
type: 'Category',
fields: [
'ccuDesignation'
],
position: 'bottom',
title: 'CCU Designation'
},
{
type: 'Numeric',
fields: [
'bytesTx'
],
position: 'left',
title: 'Bytes'
},
{
type: 'Numeric',
fields: [
'bytesRx'
],
position: 'left',
title: 'Bytes'
}
],
series: [
{
type: 'line',
xField: 'x',
yField: [
'bytesTx'
],
smooth: 3
},
{
type: 'line',
xField: 'x',
yField: [
'bytesRx'
],
smooth: 3
}
],
legend: {
}
}
]
}
]
});
me.callParent(arguments);
}
});
i have read this at sencha:
// tab generation code
var index = 0;
while(index < 3){
addTab(index % 2);
}
function addTab (closable) {
++index;
tabs.add({
title: 'New Tab ' + index,
iconCls: 'tabs',
html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
closable: !!closable
}).show();
}
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Closable Tab',
handler: function () {
addTab(true);
},
iconCls:'new-tab'
});
Ext.createWidget('button', {
renderTo: 'addButtonCt',
text: 'Add Unclosable Tab',
handler: function () {
addTab(false);
},
iconCls:'new-tab',
style: 'margin-left: 8px;'
});
But i don't have the var tabs in my script. So how can i add the tab to this:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
id: 'tabs',
activeTab: 1,
region: 'center',
items: [
{
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
},
{
xtype: 'actioncolumn',
dataIndex: 'queryFields',
items: [
{
handler: function(view, rowIndex, colIndex, item, e) {
addTab;
alert('clicked');
},
altText: 'Open report',
icon: 'img/report-arrow.png',
tooltip: 'Open report'
}
]
}
],
viewConfig: {
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, options) {
Ext.create('MyApp.view.addReport').show();
}
});
var tabs = Ext.getCmp('tabs');
function addTab (closable) {
alert('yes');
tabs.add(Ext.create('MyApp.view.MyTabPanel2'));
}
How can i do this? I work with extjs designer 2
In that first view you've shown above, you are creating another tabpanel not an individual tab. If you tried to insert that into the tabpanel that you defined in your viewport you would have a tabpanel inside of another tabpanel. I don't think that is what you are trying to do.
You could create that first view above as an Ext.tab.Tab which contains the gridpanel or just create it as the gridpanel itself and include the tab config options in your add method call. To answer your question about referencing the tabpanel when you don't have it defined as a variable: you should just give it an id config (e.g. id: 'tabs') and then you can use Ext.getCmp('tabs'). For example:
// a piece of your viewport config
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 1,
region: 'center',
id: 'tabs', // <-- include this config
// other configs...
Adding the tab could then be done like this:
// get a reference to the tab panel
var tabs = Ext.getCmp('tabs');
// if you create the view as a gridpanel you could do it like this
tabs.add({
title: sometitle,
iconCls: someicon,
closable: yayOrNay,
items: [Ext.create('MyApp.view.MyGridPanel')]
});
// OR if you create the view as an Ext.tab.Tab which already contains the gridpanel
tabs.add(Ext.create('MyApp.view.MyTab'));
Read And Use Following Code:
function allExpenseTypeReport(){
var reportByExpenseType=Ext.getCmp("reportByExpenseType");
if(reportByExpenseType==null){
reportByExpenseType = new Ext.tm.reports.ExpenseTypeReport({
title:WtfGlobal.getLocaleText("ec.reportbyexpensetype"),
layout:'fit' ,
closable: true,
iconCls:'pwnd tabreportsWrap',
id:"reportByExpenseType"
});
Ext.getCmp('as').add(reportByExpenseType);
}
Ext.getCmp("as").setActiveTab(Wtf.getCmp("reportByExpenseType"));
reportByExpenseType.doLayout();
}
Define Here:
Ext.tm.reports.ExpenseTypeReport = function(config){
Ext.apply(this, config);
Ext.tm.reports.ExpenseTypeReport.superclass.constructor.call(this, config);
Define your Code Here:
};