ExtJs Toolbar config object - javascript

So i have the following scenario
in my main view i have a container like this:
Ext.define('APP.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
id: 'root',
requires: [
'Ext.menu.*'
],
items:[
'APP.view.main.topBar'
]
});
my APP.view.main.topBar looks like this:
Ext.define('APP.view.main.topBar',{
extend: 'Ext.container.Container',
docked: 'top',
xtype: 'toolbar',
id: 'topBar',
title: 'Meniu',
items:[
{
text: 'Furnizori',
iconCls: 'x-fa fa-qrcode',
menu: 'APP.view.main.menus.menuFurn'
}
]
});
the problem is i get the following error:
Invalid config, must be a valid config object
i'm trying to include the toolbar in the items of the main

The item in the main class needs to be a proper object. See below:
Ext.define('APP.view.main.topBar', {
extend: 'Ext.container.Container',
docked: 'top',
xtype: 'myAppTopBar',
id: 'topBar',
title: 'Meniu',
items: [{
text: 'Furnizori',
iconCls: 'x-fa fa-qrcode',
menu: 'APP.view.main.menus.menuFurn'
}
]
});
Ext.define('APP.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
id: 'root',
requires: [
'Ext.menu.*'
],
items: [{
xtype: 'myAppTopBar'
}]
});

Related

Error in console: Unrecognized alias: widget.feedform

I have the following problem. When I press the Add New Feed button in the feeds.js folder, which should call the onNewFeed function (located in the MainController.js file), an error appears in the console:
Unrecognized alias: widget.feedform
When I add MainController.js in the file requires:['FeedViewer.view.main.FeedForm'] the console displays:
[Ext.Loader] error Some requested files failed to load.
Folder structure:
//FeedViewer
//app
//view
//main
/MainController.js
/MainModel.js
//classic
//modern
//src
//view
//main
/FeedForm.js
/Feeds.js
/Main.js
MainController.js
Ext.define('FeedViewer.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onNewFeed: function () {
var navView = this.getView(),
form = navView.child('feedform');
if (!form) {
navView.push({
xtype: 'feedform',
reference: 'feedform'
});
} else {
navView.setActiveItem(form);
}
}
});
FeedForm.js
Ext.define('FeedViewer.view.main.FeedForm', {
extend: 'Ext.form.Panel',
xtype: 'feedform',
requires: [
'Ext.Button',
'Ext.field.Select',
'Ext.form.FieldSet',
'Ext.Toolbar'
],
title: 'New RSS Feed',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'selectfield',
label: 'Select a new feed',
labelAlign: 'top',
allowBlank: false,
name: 'feedUrl',
options: [{
value: 'http://rssfeeds.usatoday.com/usatoday-NewsTopStories',
text: 'USA Today Top Stories'
}, {
value: 'http://sports.espn.go.com/espn/rss/news',
text: 'ESPN Top News'
}]
}]
}, {
xtype: 'toolbar',
docked: 'bottom',
items: [{
xtype: 'button',
reference: 'savebutton',
action: 'save',
ui: 'action',
text: 'Add'
}]
}]
});
Feeds.js
Ext.define('FeedViewer.view.main.Feeds', {
extend: 'Ext.grid.Grid',
xtype: 'feedslist',
requires: [
'ContactsApp.view.feeds.MainController',
'ContactsApp.view.feeds.MainModel'
],
viewModel: 'feeds',
controller: 'feeds',
columns: [{
dataIndex: 'feed',
text: 'feed'
}],
items: [{
xtype: 'toolbar',
docked: 'left',
items: [{
xtype: 'button'
text: 'Add New Feed',
iconCls: 'fa fa-plus',
listeners: {
click: 'onNewFeed'
}
}]
}]
});
Main.js
Ext.define('FeedViewer.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.window.MessageBox',
'FeedViewer.view.main.MainController',
'FeedViewer.view.main.MainModel',
'FeedViewer.view.main.List'
],
controller: 'main',
viewModel: 'main',
layout: 'column',
items: [{
xtype: 'feedlist',
columnWidth: 0.5
}]
});
Ext tries to load a component on the fly, looks like feedform is not properly registered.
Have u tried adding
alias: 'widget.feedform',
to your FeedForm.js
Panel.js as comparison:
https://docs.sencha.com/extjs/6.2.0/classic/src/Panel.js.html

Sencha 2.4.1 - List Not Displaying Items

I am trying to populate a list with static data in store, using Sencha touch 2.4.1.
One main view contains the titlebar and the list. The list is trying to get the data from the store based model, Employee.
Following are the code snippets, I cannot find out where I am getting it wrong.
Employee List View
Ext.define('MyApp.view.EmpList',{
extend: 'Ext.List',
xtype: 'emp_list',
config:{
itemTpl: Ext.XTemplate('<span>{firstname}</span>')
}
});
Employee Store
Ext.define('MyApp.store.Employee',{
extend: 'Ext.data.Store',
config:{
storeId: 'emp_store',
model: 'MyApp.model.Employee',
emptyText: 'No Employees Yet!',
data:[
{firstname:'Danish', lastname:'Siddiqui', ranking:'1', is_manager:false},
{firstname:'Danish', lastname:'Siddiqui1', ranking:'2', is_manager:false},
{firstname:'Danish', lastname:'Siddiqui2', ranking:'3', is_manager:false},
{firstname:'Danish', lastname:'Siddiqui3', ranking:'4', is_manager:false},
]
}
});
Employee Model
Ext.define('MyApp.model.Employee',{
extend: 'Ext.data.Model',
config: {
fields:[
{name: 'firstname', type:'string'},
{name: 'lastname', type:'string'},
{name: 'ranking', type:'number'},
{name: 'is_manager', type:'boolean', defaultValue: false}
]
}
});
Main View
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires:[
'Ext.TitleBar'
],
config: {
items: [
{
xtype: 'titlebar',
title: 'Employe Information',
items:[
{
xtype: 'button',
ui: 'back',
text: 'back'
}
]
},
{
xtype: 'emp_list',
store: 'emp_store'
}
]
}
});
setting width and height properties of list works.
config:{
width: '100%',
height: '100%',
itemTpl: Ext.XTemplate('<span>{firstname} {lastname}</span>'),
store: 'emp_store'
}
Model in employee store should read 'MyApp.model.Employee', shouldn't it? If that does not help, see what you get in the store? Is the store loaded with expected records?
As you mentioned, you had to give your list some size by adding height and width but also your store won't have loaded in the list due to your reference of an xtype rather than an instance of that xtype.
http://docs-origin.sencha.com/touch/2.4/2.4.1-apidocs/#!/api/Ext.dataview.List-cfg-store
So your Main view should look like this:
Ext.define('MyApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
renderTo: Ext.getBody(),
requires: ['Ext.TitleBar'],
config: {
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'Employe Information',
items: [{
xtype: 'button',
ui: 'back',
text: 'back'
}]
}, {
xtype: 'emp_list',
store: Ext.create('MyApp.store.Employee'),
}]
}
});
and your EmpList like this:
Ext.define('MyApp.view.EmpList', {
extend: 'Ext.List',
xtype: 'emp_list',
config: {
width: '100%',
height: '100%',
itemTpl: Ext.XTemplate('<span>{firstname}</span>')
}
});
Demo: https://fiddle.sencha.com/#fiddle/gqr
You will have to load the store and model inside the app.js file
stores: ['Employee'],
models: ['Employee']

Sencha Touch - another view not showing on the tab panel

I have an issue with showing a settings view on the main view when clicking a proper tab. Here is the code for the main view:
Ext.define('App.view.Main', {
extend:'Ext.tab.Panel',
requires: [
'App.view.SettingsView'
],
config: {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'About',
iconCls: 'info',
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Home Screen'
},
html: 'Home Screen'
},
{
title: 'Maps',
iconCls: 'maps',
items:
{
docked: 'top',
xtype: 'titlebar',
title: 'Maps Screen'
},
html: 'Maps Screen'
},
{
title: 'Setiings',
iconCls: 'settings',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Settings'
},
{
xtype: 'settingsview',
id: 'settingsview'
}
]
}
]
}
});
And this is the code for the settings view:
Ext.define('App.view.SettingsView', {
extend: 'Ext.form.Panel',
xtype: 'settingsview',
requires: [
'Ext.form.FieldSet',
'Ext.field.Toggle',
'Ext.field.Select',
'Ext.field.Text',
'Ext.Button'
],
config: {
xtype: 'fieldset',
title: 'SettingsView',
instructions: 'In case you do not want the app to detect your location you can enter the city and country.',
items: [
{
name: 'geo',
xtype: 'togglefield',
label: 'Auto detect?',
labelWidth: '55%',
value: '1',
},
{
name: 'units',
xtype: 'selectfield',
label: 'Units',
options: [
{
text: 'Fahrenheit',
value: 'f'
},
{
text: 'Celsius',
value: 'c'
}
]
},
{
name: 'city',
xtype: 'textfield',
label: 'City',
disabled: true
},
{
name: 'country',
xtype: 'textfield',
label: 'Country',
disabled: true
},
{
xtype: 'button',
text: 'Refresh',
action: 'refresh',
margin: '10 5',
ui: 'confirm'
}
]
}
});
When the settings tab is enabled it shows only the title bar and the tab bar. No error messages. What am I doing wrong?
Try to add layout:'fit' in config inside settingsview
OR
Modify your main view
{
title: 'Setiings',
iconCls: 'settings',
layout: 'vbox',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Settings'
},
{
xtype: 'settingsview',
id: 'settingsview',
flex: 1
}
]
}

Sencha Touch 2: Passing data from controller to a view

I am attempting to load a detail view for an item disclosure from a list but without using NavigationView and the "push()" command.
CONTROLLER:
Ext.define('App.controller.MyPlans', {
extend: 'Ext.app.Controller',
requires: ['App.view.EventDetail',
'App.view.PlansContainer'],
config: {
refs: {
},
control: {
'MyPlansList': {
disclose: 'onDisclose'
}
}
},
onDisclose: function (view, record) {
console.log("My Plans list disclosure " + record.get('id'));
var eventDetailView = Ext.create('App.view.EventDetail');
eventDetailView.setRecord(record);
Ext.Viewport.setActiveItem(eventDetailView);
}
});
VIEW:
Ext.define('App.view.EventDetail', {
extend: 'Ext.Panel',
xtype: 'EventDetail',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Event Name',
items: [{
xtype: 'button',
id: 'addRunBackBtn',
ui: 'back',
text: 'Back'
}]
}, {
xtype: 'panel',
styleHtmlContent: true,
itemTpl: [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>']
}],
}
});
I am basically trying to pass the data to the view using the "setRecord()" command but nothing seems to be loading in the view. Any thoughts??
Thanks
Instead of ItemTpl just write Tpl. I doubt that itemTpl exists without list xtype.
Other thing is put Tpl inside config:
{tpl:['<div class="ListItemContent">{descriptionddata}</div>']}
The answer before/above me is good but if you intend of keeping your formatting inside view and not in controller then , it works by using setData instead of setRecord
detailview.setData({title:record.get('title'), description:record.get('descriptiondata')});
Instead of panel try list as below
Ext.define('App.view.EventDetail', {
extend: 'Ext.TabPanel',
xtype: 'EventDetail',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Event Name',
items: [{
xtype: 'button',
id: 'addRunBackBtn',
ui: 'back',
text: 'Back'
}]
}, {
xtype: 'list',
styleHtmlContent: true,
itemTpl: [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>']
}],
}
});
I found the issue here:
A panel doesn't have a itemTpl
{
xtype: 'panel',
styleHtmlContent: true,
itemTpl : [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>'
]
}
The one of the possible way to do it could be:
Change the VIEW:
{
xtype: 'panel',
id: 'thePanel',
styleHtmlContent: true
}
Change the Controller:
onDisclose: function(me, record, target, index, e, eOpts) {
...
Ext.getCmp('thePanel').setHtml('<h1>'+record.get('name')+'</h1><h2>'+record.get('location')+'</h2><h2>'+record.get('date')'</h2>'); //For setting the Data
...
}
Hope this could help!

ExtJs 4 MVC Nested Layouts

I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.

Categories