I am currently working on ExtJs and I am stuck at a place where I want to iterate through all components and find the parent tab of each component.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
items : [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
},
{
xtype: 'button',
text: 'Reset',
}]
},
{
title: 'Tab 2',
html : 'Another one',
items: [{
xtype: 'button',
text: 'Test',
}]
}
],
renderTo : Ext.getBody()
});
}
});
In above code, when I iterate through all components and log name of the parent tab whether it is Tab 1 or Tab 2
Whenever you are iterating through all the components, just do
field.up().up()
where field is the component of your tab and above statement will return you the parent tabpanel and so with
field.up().up().title
will return you "Tab 1"
In the same way for tab 2 components it will be
field.up() only.
If you have only one loop or something to go through all components then you can put a condition that
if(field.up()) returns you the panel then read it\'s title
else do field.up().up() and then read the title.
I hope this solves you issue.
You can use , field.up('tabPanel') to get the reference of the tabPanel, and then from the reference you can get name,title for the tabPanel
Related
I have a problem with ExtJS modern toolkit's Form component.
I create a form with no buttons (you can test it in sencha fiddle). The only button is in the titlebar and it isn't working at the moment.
The problem is :
Form submission on pressing Enter. My form is empty, default method is POST, but my page is reloading when I press Enter while the focus is on any of my fields. Url address string in browser complemented form field names, but the form's method is POST.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.TextArea',
'Ext.TitleBar'
],
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Searching',
items: [{
iconCls: 'fa fa-search',
iconAlign: 'right',
text: 'Search',
align: 'right',
handler: function() {
//
}
}]
}, {
xtype: 'fieldset',
border: false,
shadow: 'true',
defaults: {
value: ''
},
items: [{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'id'
},
{
xtype: 'textfield',
label: 'Some Article',
name: 'article'
}
]
}]
});
How to prevent page reloading?
I've never seen this behaviour in ExtJS form's by default.
Just replace id with something else could be Id in field name, it is conflicting with Ext id property
{
xtype: 'numberfield',
label: 'Some ID',
allowBlank: true,
name: 'Id'
},
I wish to have an icon displayed as "value" for a form "displayfield". This is to display read-only values like true/false and yes/no with icons like "tick mark/cross mark". How to do it? There are many posts on labels but that is not what I am looking for. I need a "fieldLabel" and then the icon (it is not mandatory to use a form though, I may use any component for this).
Yes we can do that try with my example and I am attaching screenshot too.
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 200,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'home ',
name: 'home_score',
value: '<img src="home.png"></img> '
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor ',
name: 'visitor_score',
value: '<img src="visitor.png"></img>'
}],
buttons: [{
text: 'Update'
}]
});
});
Just change the path of your image in your code.If you are not using form apply the same in label field.
Finally, I did the following in items of form-panel to make it work:
{
xtype: 'fieldcontainer',
fieldLabel: 'Label 1',
flex: 1,
name: 'Name 1',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
},{
xtype: 'fieldcontainer',
fieldLabel: 'Label 2',
flex: 1,
name: 'Name 2',
items: [{
xtype: 'image',
glyph: 'something#FontAwesome'
}]
}
I put Ext.Img in 'requires' of form-panel class.
Background: I am developing an application using the senchatouch 2 MVC framework.
I am working on a screen which uses a tabpanel with two tabs.
Issue: In first tab, I want to display a titleBar and a List. I am able to display the titleBar but not the list inside the tab. When I inspected the element using Google Chrome, the list is shown as empty. I am using a sample List code from the sencha website. I am able to display list in another panel but it is not displayed when I am placing it as an item in tabPanel.
This is the code I am using:
Ext.define('POC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires: ['Ext.TitleBar', 'Ext.dataview.List', 'Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
cardSwitchAnimation: 'slide',
defaults: {
styleHtmlContent: true
},
items: [{
// This is first tab
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right'
}]
}, {
xtype: 'list',
title: 'Sample',
fullscreen: true,
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}]
}]
},
// This is second tab
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
});
Do not set the list to fullscreen. Only one component should be set to fullscreen, in your case it is the TabPanel. Instead set the list to height 100% and the parent component with a fit layout.
I need to make an app that shows a form in a window on one screen and the main window with part of the same form - or is this is'n possible another form - on the other screen. Is this possible with ExtJs ? How ? Has anyone seen an example or perhaps an extension that does such ?
You can use a 'card' layout inside your form.
In the following example, the user sees three different pages, the first two pages have fields and the last one a button.
Clicking on the button retrieves the values from the fields. It doesn't matter that the fields are in different containers, as long as these containers are 'descendants' of the form.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
layout:'card',
activeItem: 0,
bbar: [{
text: '« Previous',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var prev = cardlayout.getPrev();
if (prev) {
cardlayout.setActiveItem(prev);
}
}
},{
text: 'Next »',
handler: function(button) {
var cardlayout = button.up('form').getLayout();
var next = cardlayout.getNext();
if (next) {
cardlayout.setActiveItem(next);
}
}
}],
items: [{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'First name',
name: 'firstName'
}]
},{
xtype: 'container',
items: [{
xtype: 'textfield',
fieldLabel: 'Last name',
name: 'lastName'
}]
},{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Submit',
handler: function(button) {
var formValues = button.up('form').getValues();
alert('Name: ' + formValues.firstName
+ ' ' + formValues.lastName);
}
}]
}]
});
}
});
I'm teaching myself extjs and I am working with tabs. I can't figure out how to resize the whole container, not just the tabs, but where the data for each tab will show...I tried width: 400 but that made no change
Here's my code so far:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.require('Ext.container.Viewport');
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'tabpanel',
width: 400,
activeTab: 0, // index or id
items:[{
title: 'Tab 1',
html: 'This is tab 1 content.'
},{
title: 'Tab 2',
html: 'This is tab 2 content.'
},{
title: 'Tab 3',
html: 'This is tab 3 content.'
}]
}]//end of viewport
});
}
});
Can someone give me a snippet for this? Thanks.
You use layout : 'fit' so the tabpanel can't get width property try layout : 'form'