I have Tree panel.
everything works!;
Ext.define('My.Tree', {
extend:'Ext.tree.Panel',
id: 'DriveTree',
store: storeTree,
ChooseButtonText: 'ChooseFolder',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'BUTTON TEXT', // this.ChooseButtonText
id:'connectButton',
handler: function(){
alert(this.ChooseButtonText);
}
},
]
}],
});
Ext.onReady(function(){
var tree =Ext.create('My.Tree', {});
});
But text of dockedItems want to be from Panel. something like this:
text:this.ChooseButtonText
each dockedItems have listener - handler: function(){}. How can I see that variables in this function too?
Do it in initComponent:
Ext.define('My.Tree', {
extend: 'Ext.tree.Panel',
id: 'DriveTree',
store: storeTree,
ChooseButtonText: 'ChooseFolder',
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
text: this.ChooseButtonText,
scope: this,
handler: this.onConnectButtonClick
}]
}];
this.callParent();
},
onConnectButtonClick: function() {
console.log('Do something');
}
});
Related
file custom.js
Ext.define('BookApp.view.Customs', {
extend: 'Ext.container.Container',
requires:['BookApp.controller.MainController'],
xtype: 'customs',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
html: '<ul>...</ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content ...</h2>'
}]
}]
});
I have controller MainController
Ext.define('BookApp.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.MessageBox'
],
//alias!!!!
alias: 'controller.main',
onClickButton: function () {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) {
if (choice === 'yes') {
console.log('ALALA')
}
}
});
but when i click on button with property :
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
Error :
Uncaught TypeError: undefined is not a function
Have a look at http://docs.sencha.com/extjs/5.0/application_architecture/view_controllers.html
All that was wrong was that you were extending Ext.app.Controller instead of Ext.app.ViewController
Here is a slightly simplified version excluding the viewModel binding
//app.js
Ext.application({
name: 'BookApp',
launch: function() {
Ext.create('BookApp.view.Customs', {
fullscreen: true
});
}
});
....
controller/MainController.js
Ext.define('BookApp.controller.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onClickButton: function() {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function(choice) {
if (choice === 'yes') {
console.log('ALALA');
}
}
});
.....
view/view.Customs.js
Ext.define('BookApp.view.Customs', {
extend: 'Ext.container.Container',
xtype: 'customs',
controller: 'main',
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'testPanel',
region: 'west',
html: '<ul>...</ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
}, {
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Tab 1',
html: '<h2>Content ...</h2>'
}]
}]
});
Demo: https://fiddle.sencha.com/#fiddle/gdu
I have view like this :
Ext.define('Example.demo.CycleInfo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.layout.container.Accordion'
],
xtype: 'cycleinfo',
title: 'All Data',
defaults: {
frame: true,
bodyPadding: 5
},
initComponent: function() {
data = this.data
Ext.apply(this, {
items: [{
layout: 'accordion',
frame: true,
bodyPadding: 5,
items: [{
xtype:'structure'
},
{
title: 'Requests',
html: 'Empty'
}]
}]
});
this.callParent();
}
});
Here there are two accordian (one included item and other Requests) they are static .. I want based on this.data value(contains length) It should have accordian in the inner items. How should I do it.
If you want to add more panels to your main container with accordion layout, this should work:
Ext.define('Example.demo.CycleInfo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.layout.container.Accordion'
],
xtype: 'cycleinfo',
title: 'All Data',
defaults: {
frame: true,
bodyPadding: 5
},
initComponent: function() {
me = this;
Ext.apply(me, {
items: [{
layout: 'accordion',
frame: true,
bodyPadding: 5,
items: [{
title: 'Testing...',
html: 'This is a test panel'
},{
title: 'Requests',
html: 'Empty'
}]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
ui: 'footer',
items: ['->',{
text: 'Add panel',
handler: function() {
this.up().up().down('panel').add({
title: 'New Panel',
html : 'New Content'
})
}
}]
}]
});
this.callParent();
}
});
Ext.create('Example.demo.CycleInfo',{
renderTo: Ext.getBody(),
width: 500,
height: 500
});
Ext.define('CycleInfo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.layout.container.Accordion'
],
xtype: 'cycleinfo',
title: 'All Data',
width : 400,
height : 500,
defaults: {
frame: true,
bodyPadding: 5
},
layout: 'accordion',
initComponent: function() {
this.tbar = [{
text : 'Add Panel To Accordion',
handler : function(){
this.add({
xtype:'panel',
html: 343434
});
},
scope:this
}];
this.callParent();
}
});
Ext.create('CycleInfo',{renderTo:Ext.getBody()});
In your case you must change **xtype** in initComponent all is well
I'm quite new to Extjs and I can't figure this out:
I have a Container that requires a panel. Is there a way to dynamically initialise a component? This is my view:
Ext.define('Hello.view.index.Resume', {
extend: 'Ext.container.Container',
requires: [
'Hello.view.index.ValuesChart',
],
initComponent: function() {
this.leftZone = [{
margin: '0 0 5 0',
ui: 'hello-toggable',
xtype: 'hello_index_characteristics'
}];
Ext.apply(this, {
items: [{
xtype: 'container',
items: [{
xtype: 'hello_index_valueschart',
}, {
// ....
}]
}]
});
this.callParent();
}
});
The hello_index_valueschart panel has an initComponent function that defines several items:
initComponent: function() {
Ext.apply(this, {
border:false,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbspacer',
width: 15
},
'->',
{
xtype:'button',
customproperty: this.id,
text:'I am a text',
tooltip: 'Hi there'
},
{
xtype:'button',
customproperty: this.id,
text:'I am another text',
tooltip: 'Hi here'
}
]
}]
})
}
Is there a way to dynamically pass the items to this panel? I mean for example: if a condition is verified in the controller pass an array items1 otherwise pass array items2.
A quick thought:
you can use the afterrender event on the panel, then add the components based on a condition in the controller. Something like:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
onPanelAfterRender: function(component, eOpts) {
if(this.someCondition()) {
component.add( { ... });
}
},
someCondition: function() {
return true;
}
init: function(application) {
this.control({
"#mypanel": {
afterrender: this.onPanelAfterRender
}
});
}
});
I've the following code:
// wlpt.js
Ext.onReady(function() {
Ext.application({
name: 'WLPT',
appFolder: 'app',
controllers: ['MenuPanel'/*, 'Employees'*/],
launch: function() {
WLPT.application = this;
},
autoCreateViewport: true
});
});
//viewport.js
Ext.define('WLPT.view.Viewport', {
extend:'Ext.container.Viewport',
id:'viewport',
requires:[
'WLPT.view.Header',
'WLPT.view.MenuPanel'
],
layout: 'fit',
initComponent: function() {
this.items = {
layout: 'border',
items: [{
region: 'north',
xtype: 'headerview',
height: 80
},{
region: 'west',
id: 'westernPanel',
xtype: 'menupanelview',
width: 200,
collapsible: true
},{
xtype: 'panel',
title: 'Center Panel',
region: 'center'
}]
};
this.callParent();
}
});
// controller/MenuPanel.js
Ext.define('WLPT.controller.MenuPanel', {
extend: 'Ext.app.Controller',
currentYear: 0,
views:['MenuPanel'],
refs:
[{
selector: '.menupanel',
ref: 'menuPanel'
},{
selector: '#centerPanel',
ref: 'centerPanel'
}],
init: function() {
var d = new Date();
this.currentYear = d.getFullYear();
this.control({
'#btnEmployee': {
click: this.btnEmployeeClicked
}
});
this.callParent(arguments);
rolevalue = 10;
if (rolevalue == 10) {
// user is member of administration group
this.addAdminButtons();
}
},
addAdminButtons:function() {
console.log('addAdminButtons');
**this.getMenuPanelView().add({
xtype:'button',
scale: 'large',
text: 'Projects',
itemId: 'btnProject'
});**
}
});
// view/MenuPanel.js
Ext.define('WLPT.view.MenuPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.menupanelview',
bodyPadding: 2,
title: 'Menu Panel',
layout: {
type:'vbox',
align:'stretch'
},
items: [{
xtype:'label',
height: 10
}],
autoShow: true,
initComponent: function() {
this.callParent(arguments);
}
});
My problem is that the controller doesn't add the button on the view. I get the followig error:
Uncaught TypeError: Object function h(){return
this.constructor.apply(this,arguments)||null} has no method 'add'
What am I doing wrong?
Thanks for your help in advance
You need to add a reference to your menupanel. assign your menupanel an itemId: menupanel and in your controller you can reference it can reference it with: #menupanel. I noticed that you have .menupanel as the selector which I'm not sure is completely correct.
I also noticed that your are doing this.getMenuPanelView() which not correct as you don't have a reference to menuPanelView in your controller.
TIP:
Also you could use your browser's debugging tool(Google Chrome is my favorite) and add break points in your code to easily evaluate your code.
I am working on extjs4, my case is:
Extjs mvc is used to build my application, viewport is the toppest container of my application, west region is a tree, center region is a tabpage container, when click the tree item, a new page with certain content will be created. then in this page, I popup a model window, this model window just mask the page, not the whole viewport, so that I can still click the tree item to open another new page.
I have achieved this, but there is a problem, if I have already open a model window in a tab, and I switch to a another tab then return back, the model window is hidden, but I still want that window to show if I haven't closed it. Can anyone help me, is there a better way except using ifram in tabpage?
app.js:
Ext.application({
name: 'SysOpv',
appFolder: '/Js/AppSysOpv/app',
autoCreateViewport: true,
controllers: [
'Category',
'Band'
]
});
Viewport:
Ext.define('SysOpv.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
initComponent: function() {
this.items = {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 80,
items: [
{ xtype: 'component', html: 'setup' }
]
}],
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 250,
xtype: 'categorytree'
}, {
id: 'maintabpanel',
flex: 1,
xtype: 'tabpanel'
}]
};
this.callParent(arguments);
}
});
Tree View:
Ext.define('SysOpv.view.category.Tree', {
extend: 'Ext.tree.Panel',
alias: 'widget.categorytree',
title: 'setup',
rootVisible: false,
useArrows: true,
hideHeaders: true,
columns: [{
flex: 1,
xtype: 'treecolumn',
text: 'Name',
dataIndex: 'name'
}],
store: 'Category',
initComponent: function() {
this.callParent(arguments);
}
});
Window View:
Ext.define('SysOpv.view.edit.Band', {
extend: 'Ext.window.Window',
alias: 'widget.editband',
title: 'Setup',
layout: 'fit',
constrain: true,
modal: true,
initComponent: function() {
this.items = [{
xtype: 'form',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
}
});
Tree Controller:
Ext.define('SysOpv.controller.Category', {
extend: 'Ext.app.Controller',
models: [ 'Category' ],
stores: [ 'Category' ],
views: [ 'category.Tree' ],
init: function() {
this.control({
'categorytree': {
itemdblclick: this.onTreeItemdblclick
}
});
},
onTreeItemdblclick: function (tree, record, item, index, e, eOpts) {
var mainTabs = Ext.getCmp('maintabpanel');
var tabId = record.get('id');
if (mainTabs) {
var checkTab = mainTabs.getComponent(tabId);
if (checkTab) {
mainTabs.setActiveTab(checkTab);
} else {
var controller;
var list;
switch (tabId) {
case '0101':
list = Ext.widget('listband');
break;
}
if (list)
{
var tabPage = mainTabs.add({
id: record.get('id'),
title: record.get('name'),
closable: true,
layout: 'fit',
items: [ list ]
});
mainTabs.setActiveTab(tabPage);
}
}
}
}
});
Module Controller:
Ext.define('SysOpv.controller.Band', {
extend: 'Ext.app.Controller',
models: [ 'Band' ],
stores: [ 'Band' ],
views: [ 'list.Band', 'edit.Band' ],
init: function() {
this.control({
'listband button[action=edit]': {
click: this.onEdit
}
});
},
onEdit: function(button, e, eOpts) {
var edit = Ext.widget('editband');
var list = button.up('gridpanel');
if (list.getSelectionModel().hasSelection()) {
var record = list.getSelectionModel().getLastSelected();
// I use renderTo here but have no effect,
// so I search in the google find a way to show the window in tab,
// and not mask all the viewport.
button.up('#0101').add(edit);
edit.down('form').loadRecord(record);
edit.show();
} else {
console.log('Not selected');
}
}
});
Below is example solution:
Ext.create('Ext.TabPanel', {
renderTo: 'container',
items: [
{
title: 'Tab 1',
itemId: 'tab1',
items: [
{ xtype: 'button', text: 'Show window', handler: function(){
var tab = this.up('#tab1'); // Find tab
var win = Ext.widget('editband'); // Find window
this.up('tabpanel').showWindow(tab, win);
} }
]
},
],
showWindow: function(tab, w){
tab.add(w);
tab.popup = w;
w.on('close', function() { // clean up after window close
delete this.popup;
}, tab, { single: true });
w.show();
},
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
Basically I've created event handler for tabchange event in which I re-show window.
Working sample: http://jsfiddle.net/aCxYU/1/