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!
Related
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']
I have this weird issue with ExtJS 4.2.1.
I have a controller whose listeners catch events from a view that it shouldn't.
Here's said controller:
Ext.define('Customer_Portal_UI.controller.NavigationMenu', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'panel': {
render: function (panel) {
panel.body.on('click', function (panel, e) {
alert('onclick');
});
}
}
});
}
});
It 'controls' this view:
Ext.define('Customer_Portal_UI.view.NavigationMenu', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationmenu',
region: 'west',
layout: 'fit',
ui: 'cssmenu',
loader: {
autoLoad: true,
url: '/resources/notloggedin.html'
}
});
But it also catches panel clicks from this view:
Ext.define("Customer_Portal_UI.view.MainContent", {
extend: 'Ext.form.Panel',
alias: 'widget.maincontent',
region: 'center',
layout: 'card',
border: false,
activeItem: 0,
requires: ['Ext.grid.Panel'],
initComponent: function () {
this.items = [
{
xtype: 'panel',
title: ''
},
{
xtype: 'gridpanel',
id: 'contactlistgrid',
store: Ext.data.StoreManager.lookup('contactStore'),
columns: [
....
],
features: [{
ftype: 'grouping',
groupHeaderTpl: ['{columnName}: {name} - ({rows.length} employees)'],
hideGroupedHeader: true,
startCollapsed: false
}],
viewConfig: { id: 'contactlistgridview' }
},
{
xtype: 'gridpanel',
id: 'caselistgrid',
store: Ext.data.StoreManager.lookup('caseStore'),
columns: [
{ text: 'Title', dataIndex: 'title' },
{ text: 'Description', dataIndex: 'description' },
{ text: 'Ticket number', dataIndex: 'ticketnumber' }
],
viewConfig: { id: 'caselistgridview' }
}
]
this.callParent(arguments);
}
});
Do you see any obvious reasons why it would do this ? panel is indeed the panel I'm clicking and not the document body, which could have explained why.
Note that's in not catching clicks from other panels, just from the MainContent view, which it should not...
Thanks.
The fix was two fold as shown in here:
http://www.fusioncube.net/index.php/sencha-extjs-4-make-any-component-fire-a-click-event/comment-page-1
Then I was able to listen to 'click' for 'panel' (there's only one panel within the view) within my controller without having to refine my selector.
It should be possible to change items on a toolbar, but somehow changes are never displayed. Somehow something is wrong, and I can't find it. I also can't change text or a button state neither.
I need to change the 'all' checkbox. Changing is done in our controller by:
Ext.widget('gw_main_signals').down('#all').setValue(false);
and the view is (shortened):
Ext.define('GW.view.main.Signals', {
extend: 'Ext.grid.Panel',
alias: 'widget.gw_main_signals',
store: 'signal.Signals',
initComponent: function() {
this.bbar = Ext.
create('Ext.PagingToolbar', {
store: this.store,
displayInfo: true,
displayMsg: '{0} - {1} / {2}',
emptyMsg: ''
});
this.callParent(arguments);
},
autoScroll: true,
dockedItems: [{
xtype: 'toolbar',
itemId: 'signalToolbar',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'label',
html: bundle.getMsg('state') + ':',
}, {
xtype: 'button',
text: bundle.getMsg('new'),
itemId: 'new',
enableToggle: true,
pressed: true
// pressed by default
}, '-', {
// xtype: 'button',
// xtype: 'menucheckitem',
xtype: 'checkboxfield',
boxLabel: bundle.getMsg('all'),
itemId: 'all',
}]
}],
columns: [...],
});
Thanks for any help!
I have added a navigation view (called MainView), and a button. When i click on the button, the next view gets displayed (In the following example its called DASHBOARD). In the dashboard there's another button when i click on that another view should display. The name of that view is MOREDETAILS.
But, when i click on the button in the DASHBOARD view, MOREDETAILS view doesn't get added to the navigation view or even get displayed.
How can i resolve this ???
My Code :
MAINVIEW
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
config: {
fullscreen: true,
id: 'MainView',
ui: 'light',
modal: true,
useTitleForBackButtonText: true,
items: [
{
xtype: 'formpanel',
title: 'TEST',
layout: {
type: 'card'
},
items: [
{
xtype: 'button',
docked: 'bottom',
itemId: 'mybutton9',
ui: 'confirm',
iconAlign: 'right',
text: 'Click'
}
]
}
],
listeners: [
{
fn: 'onMybutton9Tap',
event: 'tap',
delegate: '#mybutton9'
}
]
},
onMybutton9Tap: function(button, e, eOpts) {
this.push(Ext.create('MyApp.view.Dashboard',{
title:'Dashboard'
}));
}
});
DASHBOARD
Ext.define('MyApp.view.Dashboard', {
extend: 'Ext.form.Panel',
config: {
id: 'DashboardID',
layout: {
animation: 'slide',
type: 'card'
},
modal: true,
scrollable: 'vertical',
items: [
{
xtype: 'list',
id: 'ListItem',
scrollable: true,
itemTpl: [
'<div> blah blah</div>'
],
store: 'MyJsonPStore',
items: [
{
xtype: 'button',
docked: 'top',
itemId: 'mybutton10',
text: 'MyButton10'
}
]
}
],
listeners: [
{
fn: 'onMybutton10Tap',
event: 'tap',
delegate: '#mybutton10'
}
]
},
onMybutton10Tap: function(button, e, eOpts) {
this.push(Ext.create('MyApp.view.MoreDetails',{
title:'Neeeeee'
}));
}
});
MOREDETAILS
Ext.define('MyApp.view.MoreDetails', {
extend: 'Ext.Panel',
config: {
id: 'MoreInfo',
layout: {
animation: 'slide',
type: 'card'
},
scrollable: 'vertical',
items: [
{
xtype: 'list',
itemTpl: [
'<div>jhhhjhjhjhjhjh</div>'
],
store: 'MyJsonPStore'
}
]
}
});
In onMybutton10Tap, you are calling push on this, which is a formpanel, not a navigationview. You need to get a reference to the parent before calling push.
First, give your first class an alias, which allows you to create it using xtype:
Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview'
//...more here
});
Then use up to get a reference to the parent using that xtype:
onMybutton10Tap: function(button, e, eOpts) {
this.up('mainview').push(Ext.create('MyApp.view.MoreDetails',{
title:'Neeeeee'
}));
}
i have a tab-panel which works fine so far,
but as soon as i apply a grid-panel as one of the tabs i'm getting a js-error somewhere in Observerable.js (a class from ext) that say that 'item.on(...)' is not a function after 'item is undefinded'
Here are the appropriate code lines:
This is what i do in my tab panel:
initComponent: function() {
this.items = [{
xtype: 'profileList',
title: 'Profiles'
}];
this.callParent(arguments);
}
and here is how the code of my grid panel:
Ext.define('BC.view.profile.ProfileList', {
extend: 'Ext.grid.Panel',
alias: 'widget.profileList',
cls: 'profileList',
border: false,
initComponent: function(){
Ext.apply(this, {
store: 'Profiles',
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1,
}, {
text: 'Others',
dataIndex: 'otherUsers',
width: 200
}, {
text: 'Limit',
dataIndex: 'limit',
width: 200
}]
});
console.log('before');
this.callParent(arguments);
console.log('after');
}
});
Thanks for any help!
Edit: the first console.log works, the error seems to happen in 'callParent()'
You cannot create the items of the tab panel like that:
this.items = [{
xtype: 'profileList',
title: 'Profiles'
}];
You should use Ext.apply(... instead:
Ext.apply(this,{items:[{
xtype: 'profileList',
title: 'Profiles'
}]);