When I create a new extjs panel with a Card layout inside an other panel I will got the following error:
"Uncaught TypeError: Cannot read property 'addClsOnOver' of null"
What is this error mean and how can I fix this?
Panel inside the: this is the page where I want to show a tabbed panel inside the item of this panel.
Ext.define('app.view.dashboard.DashboardLeft', {
extend: 'Ext.panel.Panel',
xtype: 'dashboardLeft',
requires: [
'Ext.layout.container.VBox',
'OPENhrm.view.dashboard.widget.*'
],
controller: 'dashboard-dashboardLeft',
viewModel: {
type: 'dashboard-dashboardLeft'
},
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
defaults: {
frame: false
},
items: [{
flex: 1,
xtype: 'taskboard' // show tabbed panel
}]
});
The tabbed panel:
Ext.define("app.view.dashboard.widget.Taskboard", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.layout.container.Card'
],
xtype: 'taskboard',
controller: 'taskboard',
viewModel: {
type: 'taskboard'
},
id: 'taskboard',
// tabs
items:[{
title: 'tab 1',
html: 'test 1'
}, {
title: 'tab 2',
html: 'test 2'
}, {
title: 'tab 3',
html: 'test 3'
}]
});
Related
I would like to have a "welcome text" before the directory tree in my Ext.tree.Panel, so something like that:
I wrote this code, but it doesn't work:
Ext.define('MyProject.view.permissions.Example', {
extend: 'Ext.tree.Panel',
requires: [
'MyProject.view.permissions.ExampleController'
],
controller: 'example',
xtype: 'exampleWindow',
store: 'examplePermissionTree',
rootVisible: false,
rowLines: false,
//headerPosition: 'left',
lines: false,
autoLoad: false,
autoExpand: false,
items :[{
xtype: 'displayfield',
fieldLabel: 'welcome text',
name: 'welcome',
}],
columns: {
items: [ {
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1
}, {
xtype: 'booleancolumn',
flex: 0.3,
dataIndex: 'granted',
trueText: Strings.permissionGranted,
falseText: Strings.permissionNotGranted
}, {
xtype: 'widgetcolumn',
flex: 0.2,
widget: {
xtype: 'button',
handler: 'onGroupClick',
text: Strings.permissionGrant
}
}
]
}
});
My problem is that the text doesn't appear. It appears only the directory tree.
How Could I fix it? Should I use another approach?
1. Use Tools instead of items
Using tools instead of items can solve the problem. An array of Ext.panel.Tool configs/instances to be added to the header tool area. The code should be like
tools :[{
xtype: 'displayfield',
fieldLabel: 'welcome text',
name: 'welcome',
}],
2. Use label in lieu of displayfield
tools :[{
xtype: 'label',
fieldLabel: 'welcome text',
name: 'welcome',
}],
How to implement close , close all and close other tabs features on right click of tab-header in Extjs?
{
xtype: 'tabpanel',
region: 'center',
reference: 'tabPanelRef',
items: [{
tab-1
},{
tab-2
},{
tab-3
}],
}
Here is an example fiddle using the TabCloseMenu plugin. By including the plugin in your tabpanel, the close, close all and close other functions appear by right-clicking on the tab header.
Ext.define('ExampleTabs', {
extend: 'Ext.tab.Panel',
xtype: 'reorderable-tabs',
requires: [
'Ext.ux.TabCloseMenu',
'Ext.ux.TabReorderer'
],
plugins: [
'tabreorderer',
'tabclosemenu'
],
defaults: {
closable: true
},
items: [{
title: 'Tab 0 - fixed',
html: "Cannot reorder or close this",
reorderable: false,
closable: false
}, {
title: 'Tab 1',
html: 'Tab 1'
}, {
title: 'Tab 2',
html: 'Tab 2'
}, {
title: 'Tab 3',
html: 'Tab 3'
}, {
title: 'Tab 4',
html: 'Tab 4'
}],
});
I'm trying to make a view with multiple formpanels (5) each with a fieldset inside however from what I've read, a view can only contain 1 formpanel, when i set 5 only the first one is shown.
Initially I was using a view with multiple fieldsets and got the look I wanted, however, this solution doesn't allow me to set store records to these fieldsets so i could manage multiple records in the same view so I had to try making these fieldsets have a parent formpanel and thus my problem started.
MyConfigView.js:
Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Panel',
alias: 'widget.configview',
config:{
layout: {
type: 'card',
animation:{
type: 'slide',
direction: 'left',
duration: 8000
}
},
items:[
{
docked: 'top',
xtype: 'toolbar',
ui: 'light',
title: 'Yadayada',
itemId: 'toolbarMyConfigView',
items: [{
xtype: 'button',
ui: 'back',
text: 'Voltar',
action: 'voltarConfigView',
itemId: 'toolbarMyConfigViewVoltarBt'
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'Yada',
id: 'fieldSetAssalto',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADA',
itemId: 'fieldSetIncendio',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'yadada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'yaaada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADADA',
itemId: 'fieldSetSequestro',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yadaaa'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'yadada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'YADA',
itemId: 'fieldSetEmedico',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'YADAA'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
},
{
xtype: 'formpanel',
items:[
{
xtype: 'fieldset',
title: 'Yada',
itemId: 'fieldSetAcidente',
model: 'Socorro.model.MyModel',
cls: 'x-floating',
items:[
{
xtype: 'textfield',
name: 'numeroTelefone',
label: 'Yada'
},
{
xtype: 'textfield',
name: 'mensagem',
label: 'Yada'
}
]
}
]
}
]
}
});
Any ideas on how can i get a view with multiple formpanels to work using Sencha Touch 2?
That is because your MyApp.view.MyConfigView view has a "card" layout applied, and this kind of layout allow you to display only a single sub view as active.
To display them all in the same view, I suggest you to set your view configuration as follows:
Ext.define('MyApp.view.MyConfigView',{
extend: 'Ext.Container',
alias: 'widget.configview',
config:{
layout: {
type: 'vbox',
align: 'stretch'
}
defaults: {
flex: 1
},
items: [
...
]
}
});
In this way you will dispose the formpanels vertically in your view, giving them the same height.
PS: Remove the 'x-floating' class from them.
However, if you want to use a Card layout (which seems to be the best solution), I suggest you to give all your formpanels a different "itemId" config param.
xtype: 'formpanel',
itemId: 'assalto',
items: [
...
]
and then, using the ST MVC architecture, get these forms one by one, and calling the function.
.setRecord(<YOUR_RECORD>);
Read more on ST Controllers on Sencha's docs.
http://docs.sencha.com/touch/2-1/#!/guide/controllers
I'm trying to have a subtabpanel in a tab panel. I did red some answers but not quite understood :(
Here for example, how can I heva tab 3, 4 and 5 appears with a back button on top when I click on tab 3 ? (everything I did : Tab 1, 2 and 3 stays there...)
Thanks :)
Main.js :
Ext.define('MyApp.view.MyNavigationView', {
extend: 'Ext.navigation.View',
config: {
ui: 'light',
items: [
{
xtype: 'tabpanel',
title: 'MyTabPanel1',
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info'
}
],
tabBar: {
docked: 'bottom'
}
},
{
xtype: 'tabpanel',
title: 'MyTabPanel',
items: [
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 4',
iconCls: 'info'
},
{
xtype: 'container',
title: 'Tab 5',
iconCls: 'info'
}
],
tabBar: {
docked: 'bottom'
}
}
]
}
});
In your case you push at once two tab panel into navigation view. But for first time you need only show first panel. For this you need add into navigation view only first panel. The second panel you need add to navigation view only when user choose third tab on first tabPanel. For this you should listen 'acitveitemchange' event and determine than 3 tab became active. Then push second tab pane.
Look this example
Ext.define('MyApp.view.MyNavigationView', {
extend: 'Ext.navigation.View',
config: {
ui: 'light',
autoDestroy: false
},
constructor : function(){
this.callParent(arguments);
this.firstTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel1',
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info',
html : 'TAB 1'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info',
html : 'TAB 2'
},
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html : 'TAB 3'
}
],
tabBar: {
docked: 'bottom'
}
});
this.secondTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel',
items: [
{
xtype: 'container',
title: 'Tab 3',
iconCls: 'info',
html : 'TAB 3'
},
{
xtype: 'container',
title: 'Tab 4',
iconCls: 'info',
html : 'TAB 4'
},
{
xtype: 'container',
title: 'Tab 5',
iconCls: 'info',
html : 'TAB 5'
}
],
tabBar: {
docked: 'bottom'
}
});
this.firstTabPanel.on('activeitemchange', this.tabPanel1ActiveItemChange, this);
//show first tab panel
this.push(this.firstTabPanel);
},
tabPanel1ActiveItemChange : function(tabpanel, newtab){
//if newtab is third tab than show second tab panel
if(this.firstTabPanel.getInnerItems().indexOf(newtab)=== 2){
this.push(this.secondTabPanel);
}
}
});
The problem i am having is that i cannot get my tabs on an extjs tab panel to fill the entire width of the panel. I have tried calling resizeTabs but have not found an answer to this probelem thanks in advance.
In your tabpanel config, add the following tabBar config:
tabBar: {
defaults: {
flex: 1
},
dock: 'top',
layout: {
pack: 'center'
}
}
Add a "layout:fit" to the config of your individual panels.
var tabs = new Ext.TabPanel({
items: [{
title: 'Tab 1',
html: 'A simple tab',
layout: 'fit'
},{
title: 'Tab 2',
html: 'Another one',
layout: 'fit'
}]
});
Or for a DRYer approach, use the TabPanel's "defaults" config option if you want all the panels to have a "fit" layout:
var tabs = new Ext.TabPanel({
defaults: {
layout: 'fit'
},
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]
});