I am trying to create a simple example of admin dasboard with Triton theme. But can't manage how to make it right. So I need a simple example of slide menu for desktop and to change content in a content area. Now my hamburger button is streched and left menu itself is not like that one in triton theme.
Ext.define('KitchenSink.view.Menus',
{
extend: 'Ext.Container',
xtype: 'app-main',
//controller: 'main',
requires: [
'Ext.Menu'
],
layout: {
type: 'card'
},
items: [
{
/*xtype: 'toolbar',
docked: 'top',
title: 'Slider Menu',*/
//docked: 'top',
xtype: 'panel',
styleHtmlContent: true,
html: ['<b>Plan'].join(''),
items: [
{
xtype: 'button',
handler: function() {
if(Ext.Viewport.getMenus().left.isHidden()){
Ext.Viewport.showMenu('left');
} else {
Ext.Viewport.hideMenu('left');
}
}
}
]
}],
initialize: function(){
Ext.Viewport.setMenu(this.createMenu(),{
side: 'left',
reveal: true
});
},
createMenu: function(){
var menu = Ext.create('Ext.Menu', {
width: 250,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'Option 1',
},{
xtype: 'button',
text: 'Option 2',
}
]
});
return menu;
}
});
Ext.application({
name: 'Foo',
mainView: 'KitchenSink.view.Menus'
});
it's the treelist component, which is used in the admin dashboard.
Take a look at the example :
http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#tree-list.
You don't have to download it. It is already in your kitchensink-example of your ext-6.x.x folder.
Related
Not sure why I'm getting an empty viewport. I am defining subclasses as components and trying to get the viewport to display the 2 components created. Seems simple enough yet coming up empty?
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
items: [{
xtype: 'titlebar',
title: 'Logo',
titleAlign: 'left',
cls: 'im-titlebar',
dock: 'top',
id: 'titlebar',
items: [
{
xtype: 'button',
text: 'Log In',
align: 'right',
ui: 'action',
margin: '',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_LogIn'
}
]
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button',
align: 'right',
ui: 'action',
ariaRole: 'button',
cls: 'btn-im-login action noprint',
id: 'button_Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
requires: ['MyApp.view.MyHeader', 'MyApp.view.MyFooter']
});
Ext.Loader.setConfig({
enabled: false
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.MyView'));
}
});
See fiddle
You're trying to require views, but you should add it to parent view by items array.
Ext.define('MyApp.view.MyHeader', {
extend: 'Ext.Container',
xtype: 'myheader',
items: [{
xtype: 'titlebar',
title: 'Logo'
}]
});
Ext.define('MyApp.view.MyFooter', {
extend: 'Ext.Container',
xtype: 'myfooter',
items: [{
xtype: 'container',
items: [{
xtype: 'button',
text: 'Button'
}]
}]
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
xtype: 'myView',
height: 100,
items: [{
xtype: 'myheader'
}, {
xtype: 'myfooter'
}]
});
Ext.application({
name: 'MyApp',
launch: function () {
Ext.Viewport.add({
xtype: 'myView'
});
}
});
Remember - classic toolkit does not have Ext.Viewport class.
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
bodyPadding: 20,
tbar: {
items: [{
xtype: 'label',
text: 'Header'
}]
},
bbar: {
items: [{
xtype: 'label',
text: 'footer'
}]
},
items: [{
xtype: 'form',
title: 'My Form',
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'someField'
}]
}]
});
}
});
Your code does what you have defined.
You need to add the Header and Footer components as items.
I would suggest that you may try to to use a panel and / or use tbar, bbar or header configs available there.
docs:
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-dockedItems
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-header
https://docs.sencha.com/extjs/6.2.0/classic/Ext.panel.Panel.html#cfg-bbar
Ext.application({
name: 'MyApp',
launch: function () {
var f = Ext.create('MyApp.view.MyHeader', {
flex: 1
});
var h = Ext.create('MyApp.view.MyFooter', {
flex: 1
});
Ext.Viewport.add(Ext.create('MyApp.view.MyView', {
layout: {
type: 'vbox',
align: 'stretch'
},
items: [h, f]
}));
}
});
Ext.define('SenchaCalc.view.TabScreen',{
extend: 'Ext.tab.Panel',
xtype: 'tabScreen',
requires: [
'Ext.tab.Panel',
],
config:{
xtype:'tabpanel',
ui: 'light',
itemId: 'tabPanel',
name: 'tabPanel',
layout:
{
animation: 'fade',
type: 'card'
},
items:[
{
title: 'HOME',
iconCls: 'home',
itemId:'home',
items:[{
xtype:'panel',
itemId:'homePanel',
height:450,
width:1010,
items:[{
xtype:'button',
itemId:'homePanelButton',
name:'homePanelButton',
html:'I m in Home Panel',
height:50,
width:350,
style:'border:0px;background:#1985D0;',
cls:'homePanelButton',
}]
}]
}]
},
{
title: 'HELP',
iconCls: 'action',
itemId:'help',
items:[{
xtype:'panel',
itemId:'helpPanel',
height:450,
width:1010,
items:[{
xtype:'button',
itemId:'helpPanelButton',
name:'helpPanelButton',
html:'I m in Help Panel',
height:50,
width:350,
style:'border:0px;background:#1985D0;',
cls:'helpPanelButton',
}]
}]
}],
}
});
/******************************************************************************/
Ext.define('SenchaCalc.view.MainScreen',{
extend: 'Ext.Panel',
xtype: 'mainScreen',
requires: [
'Ext.tab.Panel',
],
config:{
xtype: 'panel',
items:[
xtype: 'tabScreen',
]
}
});
How you are handling navigation between panel and tabscreen in your MainScreen? If you have any controller paste the code. You have not mentioned any layout there. If you want to present them in different screen then please use card layout for MainScreen. For testing of nested tabpanel inside panel I have used vbox layout and pasted the code here. Please run this on sencha jsfiddle for testing.
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.Panel", {
fullscreen: true,
xtype: 'mainScreen',
layout: {
type: 'vbox'
},
requires: [
'Ext.tab.Panel',
],
items:[
{
xtype: 'panel',
flex:1,
style: 'background:red',
html:'Main screen data'
},
{
xtype: 'tabpanel',flex:1,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Page1',
iconCls: 'home',
html: 'Panel screen data page1'
},
{
title: 'Page2',
iconCls: 'user',
html: 'Panel screen data page2'
}
]
}
]
});
}
});
Am new to sencha touch, my problem is i have a separate view to show a form panel by clicking on control event the form panel view will load, but when i click on the event nothing display on my screen. Just a blank screen to show..I dont know what am doing. The form panel is taken from sencha form panel tutorial
The following are my form panel view
Ext.define('WinReo.view.AddContact', {
extend: 'Ext.Container',
xtype: 'addcontact',
requires: [
'Ext.TitleBar'
//'Ext.Video'
],
config: {
layout:'fit'
},
initialize:function(){
console.log('inside initialize');
var formPanel = Ext.create('Ext.form.Panel', {
//xytpe:'formpanel',
fullscreen: true,
layout:'fit',
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
formPanel.setValues({
name: 'Ed',
email: 'ed#sencha.com',
password: 'secret'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
}
});
This is the controller event to show form panel view
onItemSwiped: function(list,index,target,record,e)
{
var addcontact= Ext.create('WinReo.view.AddContact');
Ext.Viewport.add(addcontact);
Ext.Viewport.setActiveItem(addcontact);
},
Just a simple task but am spending too much time to fix this one..please help me to solve this issue. Thanks in advance..
Your right about setActiveItem and you need to use it. because Ext.Viewport.add() only adds to viewPort not shows the view.
So only problem in your code is you created formPanel, but not added it in the AddContact View.
...........
// same code
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
this.add(formPanel); // add this line
}
});
See this fiddle
IMPORTANT: THIS IS WORKING IN VERSION 2.0 AND NOT IN 2.1.1
My app has 2 different tabs at the bottom (near by, search)
Both this tab use the same list as given below.
Also both NearBy and Search use card layout, the only difference is in Near By the list is in the first card and for Search the list is in the Second card
i am trying this for last 2 day and no progress in this. Please help me
Ext.define('ChurchLookup.view.ChurchList', {
extend: 'Ext.List',
xtype: 'churchlist',
config:
{
title: 'Zip Code',
cls: 'x-contacts',
grouped: true,
store: 'Churches',
itemTpl:
[
'<div class="headshot" style="background-image:url(resources/images/church-type-logo/{icon}.png);"></div>',
'{name}, {city}',
'<span>{phone} / {email}</span>'
].join('')
}});
For Near by when the tab is clicked the list will displayed inside the tab panel.
This is working perfectly and I can see the list.
NEAR BY CARD CODE
Ext.define('ChurchLookup.view.NearBy',
{
extend: 'Ext.Panel',
xtype: 'nearbycard',
config:
{
iconCls: 'locate',
title: 'Near By',
scrollable: 'vertical',
layout:
{
type: 'card',
animation:
{
type: 'pop',
duration: 500,
}
},
items:
[
{
docked: 'top',
xtype: 'titlebar',
title: 'Near by Churches',
items:
[
{
itemId: 'btnBackNearBy',
text: "Back",
ui: "back",
hidden: true,
action: 'onBackNearBy'
}/*,
{
itemId: 'btnHomeSettings',
iconMask:true,
iconCls: 'settings',
ui: 'border',
align: 'right',
action: 'pingHomeBadge'
}*/
]
},
{
xtype: 'churchlist'
},
{
xtype: 'churchdetailsnearby'
}
],
listeners:
[
{
delegate: "#btnHomeSettings",
event: "tap",
fn: "onHomeScreenSettings"
},
{
delegate: "#btnBackNearBy",
event: "tap",
fn: "onBackNearBy"
}
]
},
onHomeScreenSettings: function ()
{
this.fireEvent("homeScreenSettings", this);
},
onBackNearBy: function ()
{
this.fireEvent("onBackNearBy", this);
}
});
But for the search when we click the "Search" tab it will show a card layout with 2 card.
The frist card is the search form and the second card is the list.
When the user fill the form and click the search button I just load the store and change the card layout to show the list.
But the card layout is showing the second page but not the list.
SEARCH TAB CODE
Ext.define('ChurchLookup.view.Search',
{
extend: 'Ext.Panel',
xtype: 'searchcard',
config:
{
iconCls: 'search',
title: 'Search',
scrollable: 'vertical',
layout:
{
type: 'card',
animation:
{
type: 'pop',
duration: 500,
}
},
items:
[
{
docked: 'top',
xtype: 'titlebar',
title: 'Search Church',
items:
[
{
itemId: 'btnBackSearch',
text: "Back",
ui: "back",
hidden: true,
action: 'onBackSearch'
}/*,
{
itemId: 'btnHomeSettings',
iconMask:true,
iconCls: 'settings',
ui: 'border',
align: 'right',
action: 'pingHomeBadge'
}*/
]
},
{
xtype: 'searchform'
},
{
xtype: 'favouritecard'
},
{
xtype: 'churchdetailssearch'
}
],
listeners:
[
{
delegate: "#btnHomeSettings",
event: "tap",
fn: "onHomeScreenSettings"
},
{
delegate: "#btnBackSearch",
event: "tap",
fn: "onBackSearch"
}
]
},
onHomeScreenSettings: function ()
{
this.fireEvent("homeScreenSettings", this);
},
onBackSearch: function ()
{
this.fireEvent("onBackSearch", this);
}
});
Maybe height problem.
Is 'churchdetailssearch' the same as 'churchlist' ?
If churchdetailssearch' has toolbar or something set layout :'vbox' to 'churchdetailssearch', and add the list of 'churchdetailssearch' flex : 1.
Maybe useful the page.
Explain how to a scrollable List use dynamic height without fixed height
I'm trying to switch panels when tapping 'login' in a toolbar.
My controller gets the event and I switch by adding and setting the active item to the panel I want.. however, the screen stays blank (and there are no debug errors).
This is the code of my panel, any idea what the mistake might be?
Ext.define('App.view.LoginView', {
extend: 'Ext.Panel',
xtype: 'loginpanel',
alias: 'widget.loginView',
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'TopToolBar'
},
{
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Login',
instructions: 'Have a great day!',
items: [
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
handler: function()
{
this.up('loginpanel').submit();
}
}
]
}]})
The code of my toolbar class:
Ext.define('App.view.TopToolBar', {
extend: 'Ext.Toolbar',
xtype: 'TopToolBar',
dock: 'top',
initialize: function() {
var loginButton = {
xtype: 'button',
text: 'Login',
ui: 'action',
handler: this.onLoginTap,
scope: this
};
this.add(loginButton);
},
onLoginTap: function(){
console.log('login tap');
this.fireEvent('loginBtnHandler', this);
}})
Define classes with Ext.define.
Ext.define('My.Toolbar', {
extend: 'Ext.Toolbar',
alias: 'widget.mytoolbar'
//configuration
});
Create(Instantiate) classes with Ext.create
var tlb= Ext.create('My.Toolbar', {
//configuration
});