I've a 3rd-party component CompFoo to be added into an Ext.Tabpanel,
HTML:
<div id="div1">
</div>
<div id="div2">
</div>
and I render the CompFoo to div2, the tabpanel to div1.
var Foo = new MacroHard.bar.box({
...
renderTo: 'div2'
});
var tabs = Ext.createWidget('tabpanel',{
renderTo: 'input-div',
layout: 'fit',
height: '80%',
activeTab: 0,
items:[
{
title: 'User',
items: [
{
id: 'userid-txtfld',
xtype: 'textfield',
fieldLabel: 'User ID',
name: 'userid',
},
]
},
]....
What I want to do is to put my CompFoo into one of the tab.
Two ways:
1) Create a div with given ID into a tab, or 2) put the CompFoo into the 'items' of the TabPanel.
I don't know how to write the code in either way.
put into your items:{}
new Ext.Panel({id: 'someID',title:'someTitle',hmtl:'<your html>',...})
didn't test but should work
another way wich i'd prefer is using loader:{url:<url to the site you want to show>,renderer:'frame',...} instead of html in the panel
Related
I want to implement a route for my basic view in ExtJS so that when display it (on a button click) the URL changes and when i want to return back to the initial view it works by displaying the right view.
Giving my view class :
Ext.define('Traccar.view.newDashboard', {
extend: 'Ext.Container',
alias: 'widget.newDashboard',
id: 'geoAfricaDashboard',
routes : {
'dashboard' : ''
},
layout: {
type: 'border',
align: 'stretch '
},
height: 620,
style: {
'backgroundColor': '#909090 !important'
},
items: [{
// xtype: 'panel' implied by default
title: 'Geo-Africa Administration',
region: 'west',
xtype: 'panel',
//margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
items: [{
xtype: 'treelist',
store: {
root: {
expanded: true,
children: [{
text: 'Options',
leaf: true,
iconCls: 'fas fa-address-book'
}, {
text: 'Administration',
expanded: true,
iconCls: 'far fa-id-badge',
children: [{
text: 'Configuration',
leaf: true,
iconCls: 'fas fa-address-card'
}, {
text: 'User',
leaf: true,
iconCls: 'fas fa-child'
}]
}]
}
},
renderTo: Ext.getBody()
}]
}, {
xtype: 'basic-panels'
// width: '100%'
}]
Which i render on button click like so :
var dash = Ext.create('widget.newDashboard', {
renderTo: Ext.getBody(),
hideMode: 'visibility'
});
dash.show();
How can i assign a route URI to that view in ExtJS (6.2.0)?
Thank you for the great help ?
PS : i tried with
routes : {
'dashboard' : ''
},
or else this.redirectTo("dashboard"); But neither works.
The route is similar to firing an event. The end result is a function is called. The hash is passed to the function based on how the route is setup. You can either call a different function for each hash or you can use the hash, or other parts of the URI to determine what to do.
Router Documentation This web page describes how the router is used. It is a very quick read.
A common way the examples (admin dashboard, coworkee app) do it by having the hash be the xtype for the panel (view) you want to display.
So your main panel extends 'Ext.navigation.View'. Then based on the hash you create a new instance of the view, add it to the main panel and make it the active item. You can also check to see if the xtype has already been added to the navigation view and just make it the active panel.
Fiddle showing use of router (this is not mine). Here is a fiddle that shows how to use a router. I would recommend reading the docs first. THe sencha docs are actually pretty good and you can learn how to use the Extjs library as it was intended and really speed up your development.
I want to remove the active tab from sencha ext.
Assume that am into controller file of the view.
Note: I have used remove() as well as destroy().
destroy() function works fine but tab header is not getting removed.
coseResultTab() {
this.getView().destroy();
}
Before Clicking on Cancel button:
After Clicking on Cancel button
You should destroy the active tab in your tabpanel, eg:
Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
destroyTab: function() {
this.getView().down('tabpanel').getActiveTab().destroy();
}
});
View
Ext.create('Ext.Panel', {
width: 400,
height: 400,
renderTo: document.body,
title: 'Panel',
id: 'myPanel',
controller: 'myview',
items: [{
xtype: 'tabpanel',
items: [{
title: 'Foo',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}, {
title: 'Bar',
items: [{
xtype: 'button',
text: 'Destroy!',
handler(btn) {
Ext.getCmp('myPanel').getController().destroyTab();
}
}]
}]
}]
});
Fiddle
I enhanced the answer from Matheus to meet the requirement a bit more:
not destroying the entire tab, but only the content
setting the button handler without the use of getController (please try not to use this, as it is considered bad practice by Sencha)
removed the outer panel which only added a title
Fiddle
You can also remove it using the tab bar using closeTab() which pretty much just runs a tabs.remove(tabRefOrObj);
https://docs.sencha.com/extjs/6.5.3/modern/Ext.tab.Bar.html#method-closeTab
I have container
items: [{
xtype: 'container',
layout: 'card',
flex: 1,
itemId: 'tab-container',
deferredRender: false,
items: [ {
xtype: 'panel',
layout: 'fit',
dockedItems: [routessearch],
items: [routes]
}, {
xtype: 'panel',
layout: 'fit',
forceLayout: true,
dockedItems: [routessearch],
items: [routesSubs]
}]
}]
When page loaded I can get first tab because it is already active. But I can't get second tab because it hasn't been created.
I tried to use deferredRender:false and forceLayout:true (like in code sample), but it doesn't working.
In ExtJs you should interact with components and not with the dom directly.
So when you replace var elements = document.querySelectorAll(query); with Ext.ComponentQuery.query(query); you get an array of the matching components and you can interact with them.
From the Sencha documentation of Ext.ComponentQuery:
Provides searching of Components within Ext.ComponentManager
(globally) or a specific Ext.container.Container on the document with
a similar syntax to a CSS selector. Returns Array of matching
Components, or empty Array.
So after the component query Ext.ComponentQuery.query('#tab-container > panel') you have all inner panels.
With second = components[1] you have a reference to the second.
Now you can interact with the component.
But when you need also access to the dom of the component you get it by second.getEl().dom.
So the complete code looks like.
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
layout: 'card',
itemId: 'tab-container',
deferredRender: false,
items: [{
title: 'P1'
}, {
title: 'P2'
}],
listeners: {
boxready: function () {
var components = Ext.ComponentQuery.query('#tab-container > panel');
var second = components[1];
var el = second.getEl();
var dom = el.dom;
// code to interact with the component or with the dom
}
}
});
See the code in action in the Sencha Fiddle.
I have a panel and the layout is hbox,I have two textfileds as items of the panel.
I am not able to view the fieldLabels when i execute .Please find the code
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'hbox',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
Note:I am working on Ext 3.2.1
Your layout should be form. From the api documentation:
fieldLabel config is only used when this Component is rendered by a
Container which has been configured to use the FormLayout layout
manager (e.g. Ext.form.FormPanel or specifying layout:'form').
As already said, the fieldLabel option will only apply in a form layout context (usually provided by the form panel).
As a quick fix, you can display your labels in BoxComponent:
Ext.onReady(function() {
var panel = new Ext.FormPanel({
title: "HBox Panel",
layout: 'hbox',
width: 300,
height: 200,
renderTo: document.body,
items: [{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 1:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
},{
xtype: 'box'
,html: '<label class="x-form-item-label" style="width: auto; margin: 0 5px;">'
+ 'Label 2:</label>'
,cls: 'x-form-item'
},{
xtype: "textfield"
}]
});
});
Of course, it would be cleaner to create a CSS class for the custom styles, or even extend a new component from BoxComponent.
You can also generalize this logic in the parent panel's initComponent method, to create box components for the labels from the configured fieldLabel of the field (this way you could also set the for attribute of the label tag because you'll know the generated id of the field components at this time).
change the layout type to form,
Ext.onReady(function(){
var panel = new Ext.Panel({
title:"HBox Panel",
layout:'form',
width:300,
height:200,
renderTo:document.body,
items:[
{
xtype:"textfield",
fieldLabel:"Label1"
},
{
xtype:"textfield",
fieldLabel:"Label2"
}
]
});
});
I need a little help, I am building an app in Sencha Touch and I need to change the docked items within a container when a button is pressed. I assume this is the best way to alter the content within the app (i.e. switching between pages).
So far I have the following code -
var App = new Ext.Application({
name: 'Test',
useLoadMask: true,
launch: function () {
// Toolbar
Test.views.toolbar = new Ext.Toolbar({
id: 'toolbar',
title: 'Friend Pay'
});
// Content
Test.views.content = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Copy block</h2>'
}, {
xtype: 'button',
id: 'buttonPanel',
html: 'Request Payment',
handler: function () {
// Link to newBlock panel
}
}]
});
// Content
Test.views.newBlock = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Test 2</h2>'
}]
});
// Container
Test.views.container = new Ext.Panel({
id: 'container',
layout: 'fit',
dockedItems: [Test.views.toolbar, Test.views.content]
});
// Viewport - Entire screen
Test.views.viewport = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
items: [Test.views.container]
});
}
});
What function is required within the function() tag for the button handler to change the dockedItem within the container to be newBlock rather than content.
Many thanks for help in advance.
addDocked and removeDocked.
Test.views.viewport.removeDocked( Test.views.content )
Test.views.viewport.addDocked( Test.views.newBlock )
It seems a little odd you are adding content into dockedItems though, maybe you ment to add them to the normal items collection?
Either way, checkout everything available for Ext.Panel in the main api docs to familiarise yourself with the standard component functions.