Problem creating a container Panel in ExtJS - javascript

I am new to ExtJS and I want to create a container Panel for my buttons in ExtJS, all i managed to do so far is to try to add a simple button in my class like so :
Ext.define('MyClass.view.buttons', {
extend: 'Ext.container.Container',
alias: 'widget.MyClass',
controller: 'MyClass',
requires: [
'MyClass.view.Main',
],
items : [
{
xtype: 'button',
text : 'My Button'
}
]
});
Which doesn't display nothing too (with no reported errors in the console).
Please help me out with this.

Update:
You can user handler or listeners property to set click handler. My code was just for reference and rendering element to body will of course render it on page and not inside another element. Take a look at this updated example, where I have used xtype property of my defined component to use it inside another custom component.
Ext.define('MyClass.view.buttons', {
extend: 'Ext.container.Container',
alias: 'widget.MyClass',
xtype: 'myclass',
items: [{
xtype: 'button',
text: 'Child Button Button',
handler: function() {
alert('You clicked the button!');
}
}]
});
Ext.define('MyClass.view.anotherButtons', {
extend: 'Ext.container.Container',
alias: 'widget.MyAnotherClass',
items: [{
xtype: 'myclass'
}, {
xtype: 'button',
text: 'Parent Container Button'
}]
});
Ext.create('MyClass.view.anotherButtons', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
});
Ext.define('MyClass.view.buttons', {
extend: 'Ext.container.Container',
alias: 'widget.MyClass',
items: [{
xtype: 'button',
text: 'My Button'
}]
});
Ext.create('MyClass.view.buttons', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
});

Related

Extjs add item to extended class

Using Extjs 5 I am defining my custom toolbar:
Ext.define('Core.toolbar.view.ToolbarView',
{
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'add'
},
{
xtype: 'button',
text: 'remove'
}]
});
Now I want to use it:
Ext.define('MyApp.view.ToolbarView',
{
extend: 'Core.toolbar.view.ToolbarView',
items: [
{
xtype: 'button',
text: 'ADDING AN OTHER BUTTON'
}]
});
Ext.create('MyApp.view.ToolbarView');
Using items property I am overriding the old items with the new item, but I do not want to do it. I want to add third button.
Is possible?
I'd make use of initComponent, like this (example):
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Core.toolbar.view.ToolbarView', {
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'add'
}, {
xtype: 'button',
text: 'remove'
}]
});
Ext.define('MyApp.view.ToolbarView', {
extend: 'Core.toolbar.view.ToolbarView',
initComponent: function() {
this.callParent();
this.add({
xtype: 'button',
text: 'ADDING AN OTHER BUTTON'
});
}
});
Ext.create('MyApp.view.ToolbarView', {
renderTo: Ext.getBody()
});
Ext.create('MyApp.view.ToolbarView', {
renderTo: Ext.getBody()
});
}
});
You can use onClassExtended on your core toolbar and set a onBeforeCreated hook, for example:
onClassExtended: function (cls, data, hooks) {
var onBeforeClassCreated = hooks.onBeforeCreated,
Cls = this,
xArray = Ext.Array;
hooks.onBeforeCreated = function (clss, dataa) {
dataa.items = xArray.from(Cls.prototype.items).concat(xArray.from(dataa.items));
onBeforeClassCreated.call(this, clss, dataa, hooks);
};
}
Working example: https://fiddle.sencha.com/#fiddle/t3i
When you provide items on extending an Ext.container.Container (or creating an instance of it), by default, any previously specified items will be overridden, indeed. There is no out-of-the-box logic in place to merge them — simply because Ext JS does not know how you want them merged: whether you want the latter items to go after the former ones, or before, or somehow in the middle, or you want overriding. You need to tell Ext JS what you want explicitly.
So, here is yet another approach:
Ext.define('Core.toolbar.view.ToolbarView', {
extend: 'Ext.toolbar.Toolbar',
dock: 'top',
buildItems: function() {
return [
{
xtype: 'button',
text: 'add'
},
{
xtype: 'button',
text: 'remove'
}
];
},
initComponent: function() {
this.items = this.buildItems();
this.callParent();
}
});
Ext.define('MyApp.view.ToolbarView', {
extend: 'Core.toolbar.view.ToolbarView',
buildItems: function() {
return this.callParent().concat([
{
xtype: 'button',
text: 'ADDING AN OTHER BUTTON'
}
]);
}
});
Ext.create('MyApp.view.ToolbarView');
Example: https://fiddle.sencha.com/#fiddle/t48

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

Controller's listeners catching events (panel clicks) from other views

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.

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!

Error when assigning a Ext.grid.Panel to a Ext.tab.Panel

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

Categories