I am trying to make a little proof of concept in ExtJS. I would like to add a panel with a tree into one of my tabs, but I can't seem to find the answer in the API.
The examples look like this
var tabs = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
However I would like something like this :
var treegrid = Ext.create('KitchenSink.view.tree.TreeGrid', {....});
var tabs = Ext.create('Ext.tab.Panel', {
items: [
{
title: 'Tab 1',
html : 'A simple tab'
},
{
title: 'Tab 2',
myComponent : treegrid
}
],
renderTo : Ext.getBody()
});
I would like to know what i should put at myComponent. Obviously myComponent is not correct.
Sorry if this question seems really naive. I am VERY new to ExtJS.
The grid is a subclass of panel, so it just goes in directly under the tabs:
new Ext.tab.Panel({
items: [{
title: 'My Grid',
xtype: 'gridpanel',
columns: [],
// Other grid stuff
}]
});
Related
Which method should get fier after all the rendring done and inputEl have rendered.
I have tabpanel where I am using panel and pane have form and form have displayfield.
In my case my displayfield value is not getting render. That value is not available in dom. So I wanted to add those value manually.
Ext.fly(displayfield.id).set({ 'value': displayfield.value });
But the problem is
-afterender method is getting fiered before rendering iscompleted in dom. ANy suggestion which method should I use.
Let the system do the work for you.
Set the value in the form panel's viewModel and bind the value property of the display field to the data property in the viewModel.
Sencha Fiddle
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
viewModel: {
data: {
field1: 'default view model'
}
},
controller: {
init: function(formPanel) {
formPanel.getViewModel().set('field1', 'New Display Value');
},
},
items: [{
title: 'Title',
bodyPadding: '10 15 0 10',
layout: {
type: 'vbox'
},
items: [{
xtype: 'displayfield',
name: 'field1',
bind: {
value: '{field1}'
},
value: 'default value',
fieldLabel: 'Field One'
}]
}]
});
}
});
The ExtJS docs describe a method focus for textfields that will either focus a textfield or return false: https://docs.sencha.com/extjs/6.7.0/modern/Ext.field.Text.html#method-focus
Generally this seems to work just fine, but once the textfield that should be focused is inside a list (part of the listitem) the focus is immediately removed and set to the parent listitem container. Focus however returns true (the focus is actually on the field for a few ms).
https://fiddle.sencha.com/#view/editor&fiddle/315h shows this by example. The first button tries to focus the first textfield inside the list (which fails) and the second one focuses the field below the list.
Is there any way to prevent the listitem from becoming focused?
Code from the fiddle:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
fullscreen: true,
xtype: 'container',
items: [{
xtype: 'list',
itemConfig: {
xtype: 'container',
items: [{
xtype: 'component',
html: 'Row'
}, {
xtype: 'textfield',
value: 'Focus Me'
}],
margin: '15px 0'
},
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}, {
xtype: 'button',
text: 'Try to focus',
handler: function () {
this.up('container').down('list').down('textfield').focus();
Ext.toast(this.up('container').down('list').down('textfield').hasFocus + '');
}
}, {
xtype: 'textfield',
itemId: 'focusable',
value: 'Focusable'
}, {
xtype: 'button',
text: 'Try to focus',
handler: function () {
this.up('container').down('#focusable').focus();
Ext.toast(this.up('container').down('#focusable').hasFocus + '');
}
}]
});
}
});
On ExtJS 6.7 the first click on a textfield in a list does not even work but this seems to be fixed in 7.0.
Set defaultFocus for listitem container. Its work for me (fiddle).
P.S. thank you for your fiddle example. few do it.
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'
}]
});
I want to 2 forms, & I want to use card layout, so that when the user submits form1, he is taken to form2. But, when I try to MyApp.container.setActiveItem(2) (using console), it does not move to form2(card2).
Ext.define('MyApp.view.Forms', {
extend: 'Ext.Container',
xtype: 'formsPage',
id: 'formsForm',
config: {
title: 'Patient Registration',
iconCls: 'user',
layout:{
type: 'card'
},
items: [
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Names',
name: 'name'
},
{
xtype: 'textfield',
label: 'City',
name: 'city'
}
]
},
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Phone',
name: 'phone'
},
{
xtype: 'textfield',
label: 'Country',
name: 'conutry'
}
]
}
],
constructor:function(config) {
this.initConfig(config);
return this;
}
}
});
MyApp.container = Ext.create('MyApp.view.Forms', {});
Please note that array items in Sencha Touch 2 are indexed from 0, so if you want to activate second one, it should be something like this:
MyApp.container.setActiveItem(1)
Edited: I've figured it out. You should add another config to your view: fullscreen:true and it should work well :)
Is your form xtype of 'formsPage' custom, I can't seem to find it in the doco? If it's not, that might be contributing to the issue.
The doco also suggests that you don't create the card layout directly, but instead use carousel or tab panel. Maybe use a carousel as your base component, then make each card a separate form? This would make your intentions clear that each card/form is to be independent.
Hope that helps
do the following:
extend the carousel
extend: 'Ext.Carousel',
change the config section to:
config: {
title: 'Patient Registration',
iconCls: 'user',
cls: 'card'
----
guess that should fix it
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'
}]
});