Sencha 2.4.1 - List Not Displaying Items - javascript

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']

Related

How in one tab Ext.tab.Panel output two Ext.grid.Panel. Extjs

How to make that in Ext.tab.Panel in tab Mytab1 two Ext.grid.Panel were loaded?
In the app.js file, I get the Ext.tab.Panel:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'BookApp',
appFolder: 'static/hello_extjs',
controllers: ['Books'],
launch: function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'north',
xtype: 'maintab'
}
]
});
}
});
In Ext.tab.Panel I do not know how to correctly form items Mytab1 that would load two Ext.grid.Panel:
Ext.define('BookApp.view.MainTab', {
extend: 'Ext.tab.Panel',
xtype: 'maintab',
alias: 'widget.maintab',
title: 'Панель вкладок',
items: [
{
items: //How to do what would be displayed two grids
title: 'Mytab1',
border: false,
layout: 'fit',
header: false
},
{
items: 'booklist',//What exactly is necessary to point out that one grid
title: 'Mytab2',
border: false,
layout: 'fit',
header: false
}
]
});
You have to put your grids in items and call them from xtype property: FIDDLE

ExtJs Toolbar config object

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'
}]
});

what is this ext.js's "xtype: 'app-main'"

Newbie to ext.js: I am trying to understand what is this:
xtype: 'app-main'
means in my auto generated code. No documentation available. I guess this is a reference to so me alias, but I could not find it..
I used sencha cmd (latest may 2014 - ext.js 4.2.2) which autogenerated a number of files, which had xtype: 'app-main' in them...
Main.js
Ext.define('test12.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
xtype: 'app-main', <<<<-------
layout: {
type: 'border'
},
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Center Tab 1'
}]
}]
});
viewport.js
Ext.define('test12.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'test12.view.Main'
],
layout: {
type: 'fit'
},
items: [{
xtype: 'app-main'
}]
});
xtype is a config that allow you to instantiate the classes you define more easily
Example:
Ext.define('Myapp.view.MyCoolPanel',{
extend : 'Ext.panel.Panel',
xtype : 'coolpanel',
//some cool configs ...
});
//somewhere else
Ext.create('Ext.window.Window',{
//regular configs
items: [
{
xtype: 'coolpanel'
}
]
}).show();
see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-xtype
best regards
So, it seems that xtype: ... inside a Ext.defing( ... ) {
sets the new view to the xtype, in this case app-main.
Makes sense ;)

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!

Sencha Touch 2 Filter a List Store

I have the following code as my main javascript file for displaying a list + buttons. It all shows properly and everything like adding items to the store works great, but is there a simple way to get the list to only display values where the name equals a certain value?
Ext.define("MyProject.view.Main", {
extend: 'Ext.NavigationView',
requires: ['Ext.NavigationView', 'Ext.dataview.List'],
xtype: 'myproject-main',
config: {
items: [
{
title: 'List of Data',
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
items: [
{
xtype: 'list',
store: 'DataStuff',
itemTpl: '{name}',
emptyText: 'No data added yet'
},
{
xtype: 'container',
docked: 'bottom',
padding: '5px',
layout: 'hbox',
items: [{ xtype: 'button', itemId: 'addBtn', text: 'Add Data', ui: 'confirm', width: '50%', align: 'left' }, { xtype: 'button', itemId: 'updateBtn', text: 'Update Data', ui: 'action', width: '50%', align: 'right' }]
}
]
}
]
}
});
I had thought there was a simple filters: category I could add under the store but couldn't find anything that worked.
List displays items that provided by store. For controls list filter you should control his store fitlers.
Example
var store = list.getStore();
store.filter('category', 'first');
//or
var customFilter = function(record){
return soAnyCheckForRecods(record);
}
store.filterBy(customFilter);
More information about filters look here http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Store

Categories