Related
In ExtJS, on a menu toolbar button, I am trying to remove the current panel in my center window, then recreate it with the new selection. I do not understand the proper way to do this. So far when I click the menu item, it removes whatever is currently there successfully, then it will add the new panel successfully. The problem is the 2nd time I hit the button I get the following error:
REGISTERING DUPLICATE COMPONENT ID 'mainportalID'.
I realize its telling me I already used this ID, but then what would be the correct way to remove the current panel, and replace with a new one?
Here is my view controller:
selectMenuButton: function (button, e) {
console.log('select menu button section was hit')
console.log(button);
console.log(e);
var optionString = button.text;
var myDetailsPanel = Ext.getCmp('navview');
console.log(myDetailsPanel);
var count = myDetailsPanel.items.items.length;
if (count > 0) {
myDetailsPanel.items.each(function (item, index, len) {
myDetailsPanel.remove(item, false);
});
}
myDetailsPanel.add({
xtype: optionString
});
}
var myStore = Ext.create('ExtApplication1.store.PositionsStore');
var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
{
text: 'AcctNum',
dataIndex: 'AcctNum',
width: 100
},
{
text: 'AcctShortCode',
dataIndex: 'AcctShortCode',
flex: 1
},
{
text: 'Exchange',
dataIndex: 'Exchange',
width: 200
}
]
});
This is my view
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportal',
id: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
]
});
adjusted panel
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportalAlias',
reference: 'gridtextfield',
//id: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
]
});
adjusted view controller
onComboboxSelect: function (combo, record, eOpts) {
console.log('new listener was hit');
//return selected Item
var selectedValue = record.get('ClientName');
var selectedCID = record.get('ClientID');
//find the grid that was created
var me = this;
console.log(me);
var xxx = this.lookupReference('gridtextfield');
debugger;
//debugger;
var mainPortalView = Ext.getCmp('mainportalID');
var targetGrid = mainPortalView.down('grid');
//find the store associated with that grid
var targetStore = targetGrid.getStore();
//load store
targetStore.load({
params: {
user: 'stephen',
pw: 'forero',
cid: selectedCID
}
//callback: function (records) {
// Ext.each(records, function (record) {
// console.log(record);
// });
// console.log(targetStore);
//}
});
},
added listeners to MainPortal.js
var myStore = Ext.create('ExtApplication1.store.PositionsStore');
var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
{
text: 'AcctNum',
dataIndex: 'AcctNum',
width: 100
},
{
text: 'AcctShortCode',
dataIndex: 'AcctShortCode',
flex: 1
},
{
text: 'Exchange',
dataIndex: 'Exchange',
width: 200
}
],
listeners: {
destroy: function () {
debugger;
}
}
});
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportalAlias',
//id: 'mainportalID',
itemId: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
],
listeners: {
destroy: function () {
debugger;
}
}
});
i am using a customized DataView in my app, this DataView was set to scroll vertically and been added into a panel later.
But now the DataView cannot scroll properly, the problem is:
when i drop down the DataView, it can scroll down, but when i release my finger, it scroll back to top automatically.
could anybody help to check what's the reason?
thanks~~
here is my codes:
==============The DataView==============
Ext.define("cherry.view.UserActivityList", {
extend: 'Ext.dataview.DataView',
xtype: 'user-activity-list',
requires: [
'cherry.store.UserActivityStore',
'Ext.dataview.DataView',
'Ext.XTemplate'
],
config: {
styleHtmlContent: true,
height: '100%',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="activity-ctn">',
' <div class="activity-content">{content}</div>',
'</tpl>'
)
},
initialize: function () {
this.callParent(arguments);
var me = this;
var store = Ext.getStore('user-activity-store');
store.load();
me.setStore(store);
}
});
============Panel contains the DataView============
Ext.define('cherry.view.Main', {
extend: 'Ext.Panel',
xtype: 'main',
requires: [
'cherry.view.ComposeToolbar',
'cherry.view.Menubar',
'cherry.view.UserActivityList'
],
config: {
layout: 'card',
id: 'main-container-view',
scrollable: null,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'cherry',
id: 'main-toolbar',
cls: 'main-toolbar',
items: [
{
xtype: 'button',
iconCls: 'menu2',
text: 'Menu',
iconMask: true,
handler: function () {
Ext.Viewport.toggleMenu('left');
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconCls: 'loop2',
text: 'Refresh',
iconMask: false,
handler: function () {
Ext.getStore('user-activity-store').load();
Ext.ComponentQuery.query('#user-activities-list-view')[0].refresh();
}
}
]
},
{
xtype: 'compose-toolbar'
},
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
]
},
initialize: function () {
Ext.Viewport.setMenu(cherry.view.Menubar.createMenu('left'), {
side: 'left',
reveal: true
});
}
});
It seems that your error is due to the layout config in user-activity-list
{
xtype: 'user-activity-list',
id: 'user-activities-list-view',
itemId: 'user-activities-list-view',
layout: 'fit',
height:'100%',
cls:'dataview-ctn',
scrollable:{
direction:'vertical'
}
}
A dataview must ALWAYS! have its layout to Auto. As stated by the constructor, which by the way you should be seeing a log error.
constructor: function(config) {
var me = this,
layout;
me.hasLoadedStore = false;
me.mixins.selectable.constructor.apply(me, arguments);
me.indexOffset = 0;
me.callParent(arguments);
//<debug>
layout = this.getLayout();
if (layout && !layout.isAuto) {
Ext.Logger.error('The base layout for a DataView must always be an Auto Layout');
}
//</debug>
}
Try removing the layout config it should fix your error.
Cheers!
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 unable to set the value for the textfield which is inside fieldcontainer. I want to set the value and other config for the "textfield" which is inside the "fieldcontainer". So basically i set the configuration for the textfield which i receive from the server, like for example : allowBank: true , maxlength: 4, value: 'Hello World' i get from the server and want to supply it to the textdfield which is inside my custom control which is fieldcontainer. All other configuration is applied except for the value config using the built in textConfig. Below is my code:
Ext.define('PTextField', { extend: 'Ext.form.FieldContainer',
alias: 'widget.ptextfield',
requires: ['Ext.form.TextField', 'Ext.Img'],
width: 170,
fieldLabel: 'Empty Label',
labelAlign: 'top',
layout: {
type: 'hbox'
},
BLANK_IMAGE_URL: '',
constructor: function (config) {
this.callParent(arguments);
Ext.apply(this.down('textfield'), this.textConfig);
Ext.apply(this.down('image'), this.imgConfig);
}, // eo function constructor
initComponent: function () {
var me = this;
this.textBox = this.createTextField();
this.imageBox = this.createImagefield();
this.items = [this.imageBox, this.textBox];
this.callParent(arguments);
}, //eo initComponent
createTextField: function () { return {xtype: 'textfield'} },
createImagefield: function () { return { xtype: 'image', height: 20, width: 20} }
});
var fname = Ext.create('PTextField', {
fieldLabel: 'First Name',
textConfig: { value: 'Hello World', allowBlank: false, readOnly: true, maxLength: 4, width: 100 },
imgConfig: { src: 'http://www.sencha.com/img/20110215-feat-html5.png' }
});
fname.render(Ext.getBody());
I am using extjs 4.1.
Any help is appreciated.
You should simply create the textfield and image using your configs. Then define your items array using the created objects, like this:
initComponent: function() {
var me = this,
textfield = Ext.widget('textfield', me.textConfig),
image = Ext.widget('image', me.imgConfig);
me.items = [textfield, image];
me.callParent(arguments);
},
I would simplify your code to something like that:
Remove whole constructor() function. you don't need it.
Rewrite initComponent() function for your fieldset as:
initComponent: function() {
var me = this;
Ext.apply(me, items: [{
xtype: 'textfield',
value: me.textConfig.value,
....
}, {
xtype: 'image',
src: me.imageConfig.src,
...
}]);
}
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/