PDA

View Full Version : Extending Ext Classes (3.0) - What can I do better?



828
20 Oct 2009, 5:04 AM
Is it possible for someone to take a moment and look at my code. I am trying to create a window that enables me to edit content of a site, however, the window seems to be fine in FF3, but it's pretty slow in IE7. Is there anything in the code that I am doing wrong? For example, the Ext OK/CANCEL window shows up and the buttons are aligned right on show, then moves to the center. There is about a second or so delay for the buttons to get to the right place. The loading mask is not centered in the body of the tab. Those are just a few issues I am having.



Ext.ns('editor');
makeNewsStores()
makeKBStores();
makeAnnouncementStores();
makeLinksStores();
var object = {};
// Edit Card Panel
editor.CardPanel = Ext.extend(Ext.Panel, {
// configurables
border: false,
layout: 'card',
activeItem: 0,
colModel: this.config,
store: this.config,
approveItemUrl: this.config,
editItemUrl: this.config,
saveItemUrl: this.config,
deleteItemUrl: this.config,
tplMarkup: this.config,
form: this.config,
initComponent: function () {
var config = {
items: [{
layout: 'border',
border: false,
items: [{
border: false,
xtype: 'grid',
stripeRows: true,
singleSelect: true,
store: this.store,
cm: this.colModel,
region: 'center',
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
viewConfig: {
forceFit: true
},
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: this.store,
displayInfo: true
}),
tbar: new Ext.Toolbar({
items: [{
text: 'New',
scope: this,
handler: this.itemNew,
cls: "x-btn-text-icon",
icon: '/sys_art/icons/add.png'
},
{
text: 'Edit',
hidden: true,
hideMode: 'visibility',
scope: this,
handler: this.itemEdit,
cls: "x-btn-text-icon",
icon: '/sys_art/icons/edit.png'
},
{
text: 'Delete',
hidden: true,
hideMode: 'visibility',
scope: this,
handler: this.itemDelete,
cls: "x-btn-text-icon",
icon: '/sys_art/icons/delete.png'
},
'->', {
text: 'Approve',
hidden: true,
hideMode: 'visibility',
scope: this,
handler: this.itemApprove,
cls: "x-btn-text-icon",
icon: '/sys_art/icons/approve.png'
},
{
text: 'Reject',
hidden: true,
hideMode: 'visibility',
scope: this,
handler: this.itemReject,
cls: "x-btn-text-icon",
icon: '/sys_art/icons/reject.png'
}]
})
},
{
border: false,
region: 'south',
height: 250,
autoScroll: true,
padding: 10
}]
},
{
xtype: 'form',
padding: 10,
border: false,
monitorValid: true,
defaults: {
anchor: '95%'
},
watiMsgTarget: true,
items: this.form,
buttons: [{
text: 'Save',
scope: this,
formBind: true,
type: 'submit',
handler: this.save
},
{
text: 'Cancel',
scope: this,
handler: this.cancel
}]
}]
};
Ext.apply(this, Ext.apply(config));
editor.CardPanel.superclass.initComponent.apply(this, arguments);
if (this.tplMarkup) {
this.tpl = this.tplMarkup;
}
this.InfoPanel = this.items.itemAt(0);
this.grid = this.InfoPanel.items.itemAt(0);
this.btnEdit = this.grid.getTopToolbar().items.itemAt(1)
this.btnDelete = this.grid.getTopToolbar().items.itemAt(2)
this.btnApprove = this.grid.getTopToolbar().items.itemAt(4)
this.btnReject = this.grid.getTopToolbar().items.itemAt(5)
if (this.grid.getStore()) {
this.grid.on({
scope: this,
rowdblclick: this.itemEdit,
render: function () {
this.store.load({
params: {
start: 0,
limit: 10
}
});
}
});
this.detail = this.InfoPanel.items.itemAt(1);
var sm = this.grid.getSelectionModel();
sm.on({
scope: this,
rowselect: this.onRowSelect
});
this.grid.getView().on({
scope: this,
refresh: function () {
this.grid.getSelectionModel().selectFirstRow();
}
});
}
} //End of Init
,
itemNew: function () {
this.layout.setActiveItem(1);
this.layout.activeItem.getForm().reset();
Ext.Ajax.request({
url: this.editItemUrl,
waitMsg: 'Loading...',
jsonData: {
itemId: ''
},
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
scope: this,
success: function (response, options) {
window.setTimeout(function () {
Ext.Msg.hide();
},
1000);
var result = Ext.decode(response.responseText);
if (result.success == true) {
object = result.data;
var tab = this.ownerCt;
loadItem(object, tab);
return object;
} else {}
}
})
},
itemEdit: function () {
Ext.Msg.wait('Please wait... System is processing...', 'Loading');
var selection = this.grid.getSelectionModel().getSelected();
if (selection) {
var id = selection.id;
this.layout.setActiveItem(1);
this.layout.activeItem.getForm().reset();
Ext.Ajax.request({
url: this.editItemUrl,
waitMsg: 'Loading...',
jsonData: {
itemId: id
},
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
scope: this,
success: function (response, options) {
window.setTimeout(function () {
Ext.Msg.hide();
},
1000);
var result = Ext.decode(response.responseText);
if (result.success == true) {
Ext.Msg.hide();
object = result.data;
var tab = this.ownerCt;
loadItem(object, tab);
return object;
} else {}
}
})
} else {
Ext.Msg.show({
title: 'Status',
width: 250,
msg: 'Please select an entry to edit.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.WARNING
});
}
},
itemDelete: function () {
var selection = this.grid.getSelectionModel().getSelected();
if (selection) {
var id = selection.id;
Ext.Msg.confirm("Delete", "Are you sure you want to delete this item?", function (btn) {
if (btn == 'yes') {
Ext.Msg.wait('Please wait... System is processing...', 'Deleting');
if (this.InEditMode) {} else {
Ext.Ajax.request({
url: this.deleteItemUrl,
headers: {
'Content-Type': 'application/json'
},
method: "POST",
jsonData: {
itemId: id
},
waitMsg: 'Deleting...',
waitTitle: 'Updating Knowledge Base',
scope: this,
success: function (response, options) {
var o = {};
try {
o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText);
return;
}
if (true !== o.Success) {
var message = "";
for (var i = 0; i < o.Errors.length; i++) {
message += o.Errors[i] + " ";
}
Ext.Msg.show({
title: 'Status',
width: 250,
msg: message,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
else {
Ext.Msg.hide();
this.layout.setActiveItem(0);
this.grid.getStore().load();
}
},
failure: function (response, options) {}
});
}
} else {
return false;
}
},
this);
} else {
Ext.Msg.show({
title: 'Status',
width: 250,
msg: 'Please select an item to delete',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.WARNING
});
}
},
itemApprove: function () {
Ext.Msg.wait('Please wait... System is processing...', 'Approving');
var selection = this.grid.getSelectionModel().getSelected();
if (selection) {
var id = selection.id;
Ext.Ajax.request({
url: this.approveItemUrl,
jsonData: {
itemId: id,
isApproved: true,
reason: ''
},
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
scope: this,
success: function (response, options) {
var o = {};
try {
o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText);
return;
}
if (true !== o.Success) {
var message = "";
for (var i = 0; i < o.Errors.length; i++) {
message += o.Errors[i] + " ";
}
Ext.Msg.show({
title: 'Status',
width: 250,
msg: message,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
else {
Ext.Msg.hide();
this.grid.getStore().load();
}
},
failure: function (response, options) {}
});
} else {
Ext.Msg.show({
title: 'Status',
width: 250,
msg: 'Please select an entry to approve.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.WARNING
});
}
},
itemReject: function () {
var selection = this.grid.getSelectionModel().getSelected();
if (selection) {
var id = selection.id;
Ext.Msg.prompt('Reject', 'Reason:', function (btn, text) {
if (btn == 'ok') {
Ext.Ajax.request({
url: this.approveItemUrl,
jsonData: {
itemId: id,
isApproved: false,
reason: text
},
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
scope: this,
success: function (response, options) {
var o = {};
try {
o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText);
return;
}
if (true !== o.Success) {
var message = "";
for (var i = 0; i < o.Errors.length; i++) {
message += o.Errors[i] + " ";
}
Ext.Msg.show({
title: 'Status',
width: 250,
msg: message,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
else {
this.grid.getStore().load();
}
},
failure: function (response, options) {}
});
}
},
this, true);
} else {
Ext.Msg.show({
title: 'Status',
width: 250,
msg: 'Please select an entry to reject.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.WARNING
});
}
},
save: function () {
Ext.Msg.wait('Please wait... System is processing...', 'Saving');
var tab = this.ownerCt;
switch (tab.title) {
case 'News':
saveNewsItem();
break;
case 'Knowledge Base':
saveKBItem();
break;
case 'Announcements':
saveAnnouncementItem();
break;
case 'Links':
saveLinkItem();
break;
case 'Documents':
console.log(tab.title);
break;
}
var item = {};
var itemSend = {};
itemSend.item = object;
Ext.Ajax.request({
url: this.saveItemUrl,
headers: {
'Content-Type': 'application/json'
},
method: "POST",
jsonData: Ext.encode(itemSend),
waitMsg: 'Submitting',
waitTitle: 'Updating Knowledge Base',
scope: this,
success: function (response, options) {
var o = {};
try {
o = Ext.decode(response.responseText);
}
catch(e) {
this.showError(response.responseText);
return;
}
if (true !== o.Success) {
var message = "";
for (var i = 0; i < o.Errors.length; i++) {
message += o.Errors[i] + " ";
}
Ext.Msg.show({
title: 'Status',
width: 250,
msg: message,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
return false;
}
else {
Ext.Msg.hide()
this.layout.setActiveItem(0);
this.grid.getStore().load();
return object = {};
}
},
failure: function (response, options) {
return false;
}
});
},
cancel: function () {
Ext.Msg.confirm("Cancel", "Are you sure you want to cancel?", function (btn) {
if (btn == 'yes') {
this.layout.activeItem.getForm().reset();
this.layout.setActiveItem(0);
return object = {};
} else {
return false;
}
},
this);
},
getGrid: function () {
return this.grid;
},
isEditMode: function () {
if (this.layout.activeItem.xtype == 'form') {
return true;
} else {
return false;
}
},
updateDetail: function (data) {
this.tpl.overwrite(this.detail.body, data);
},
onRowSelect: function (sm, rowIdx, r) {
var approverStatus = this.grid.getStore().reader.jsonData.CurrentUser.IsApprover;
if (r.data.Status != '0') {
this.btnApprove.setVisible(approverStatus);
this.btnReject.setVisible(approverStatus);
} else {
this.btnApprove.setVisible(false);
this.btnReject.setVisible(false);
}
this.btnEdit.setVisible(true);
this.btnDelete.setVisible(true);
this.updateDetail(r.data);
}
});
Ext.reg('cpanel', editor.CardPanel);
// Edit Panel
editor.Panel = Ext.extend(Ext.Panel, {
// configurables
colModel: this.config,
loadMask: true,
maskConfig: {
msg: "Loading items..."
},
store: this.config,
storeAuthor: this.config,
storePending: this.pending,
approveItemUrl: this.config,
editItemUrl: this.config,
saveItemUrl: this.config,
deleteItemUrl: this.config,
form: this.config,
tplMarkup: this.config,
layout: 'border',
initComponent: function () {
var config = {
items: [{
xtype: 'panel',
region: 'west',
width: 150,
bodyStyle: 'background:#E4E4E4',
border: false
},
{
xtype: 'cpanel',
region: 'center',
store: this.store,
storeAuthor: this.storeAuthor,
storePending: this.storePending,
colModel: this.colModel,
tplMarkup: this.tplMarkup,
approveItemUrl: this.approveItemUrl,
editItemUrl: this.editItemUrl,
saveItemUrl: this.saveItemUrl,
deleteItemUrl: this.deleteItemUrl,
form: this.form
}]
};
Ext.apply(this, Ext.apply(config));
editor.Panel.superclass.initComponent.apply(this, arguments);
// define container objects
this.linksPanel = this.items.itemAt(0);
this.panel = this.items.itemAt(1);
this.grid = this.panel.getGrid();
this.linksPanel.on({
scope: this,
render: function () {
this.linksPanel.add({
text: 'All Entries',
xtype: 'button',
pressed: true,
height: 150,
allowDepress: false,
enableToggle: true,
toggleGroup: 'editorBtn',
iconAlign: 'top',
scale: 'large',
width: '100%',
tooltip: 'All Entries',
icon: '/sys_art/magAll.png',
cls: 'x-btn-text-icon',
scope: this,
toggleHandler: function (btn, pressed) {
if (pressed == true) {
this.loadAll()
}
}
});
this.linksPanel.add({
text: 'My Entries',
xtype: 'button',
height: 150,
allowDepress: false,
enableToggle: true,
toggleGroup: 'editorBtn',
iconAlign: 'top',
scale: 'large',
width: '100%',
tooltip: 'My Entries',
icon: '/sys_art/magMy.png',
cls: 'x-btn-text-icon',
scope: this,
toggleHandler: function (btn, pressed) {
if (pressed == true) {
this.loadMy()
}
}
});
this.linksPanel.add({
text: 'Pending Entries',
xtype: 'button',
height: 150,
allowDepress: false,
enableToggle: true,
toggleGroup: 'editorBtn',
iconAlign: 'top',
scale: 'large',
width: '100%',
tooltip: 'Pending Entries',
icon: '/sys_art/magPending.png',
cls: 'x-btn-text-icon',
scope: this,
toggleHandler: function (btn, pressed) {
if (pressed == true) {
this.loadPending()
}
}
});
}
});
//if (this.mask) { this.on('render', this.createMask, this); }
},
onRender: function () {
editor.Panel.superclass.onRender.apply(this, arguments);
if (this.store) {
if (this.loadMask) {
this.loadMask = new Ext.LoadMask(this.getEl(), Ext.apply({
store: this.grid.getStore()
},
this.loadMask));
}
}
},
initEvents: function () {
editor.Panel.superclass.initEvents.call(this);
this.storePending.on({
scope: this,
load: function (store, records, options) {
if (records.length == 0) {
this.panel.detail.body.update('There are no pending entries at this time. Please try again later.');
this.hideButtons();
}
}
});
this.storeAuthor.on({
scope: this,
load: function (store, records, options) {
if (records.length == 0) {
this.panel.detail.body.update('You do not have any entries at this time. Please click on the "new" button to create a new entry.');
this.hideButtons();
}
}
});
this.store.on({
scope: this,
load: function (store, records, options) {
if (records.length == 0) {
this.panel.detail.body.update('There are no entries at this time. Please try again later.');
this.hideButtons();
}
}
});
},
setActiveLink: function (item) {
var link;
var linkClass = item.className;
var linkCollection = this.linksPanel.body.dom.children;
for (link in linkCollection) {
linkCollection[link].className = linkClass;
}
Ext.fly(item).addClass('active');
},
hideButtons: function () {
this.panel.btnEdit.setVisible(false);
this.panel.btnDelete.setVisible(false);
this.panel.btnApprove.setVisible(false);
this.panel.btnReject.setVisible(false);
},
loadAll: function () {
var pager = this.panel.getGrid().getBottomToolbar();
if (this.panel.isEditMode()) {
this.panel.cancel();
}
this.panel.getGrid().reconfigure(this.store, this.colModel);
this.updatePager();
this.store.load();
},
loadMy: function () {
var pager = this.panel.getGrid().getBottomToolbar();
if (this.panel.isEditMode()) {
this.panel.cancel();
}
this.panel.getGrid().reconfigure(this.storeAuthor, this.colModel);
this.updatePager();
this.storeAuthor.load();
},
loadPending: function () {
var pager = this.panel.getGrid().getBottomToolbar();
if (this.panel.isEditMode()) {
this.panel.cancel();
}
this.panel.getGrid().reconfigure(this.storePending, this.colModel);
this.updatePager();
this.storePending.load();
},
getGrid: function () {
this.grid = this.panel.getGrid();
return this.grid
},
getStore: function () {
return this.grid.getStore()
},
updatePager: function () {
this.pager = this.getGrid().getBottomToolbar();
this.pager.bindStore(this.getGrid().getStore());
}
});
Ext.reg('epanel', editor.Panel);
// Editor Window
function openEditor(tab, btn) {
if (!editorWin) {
var editorWin = new Ext.Window({
id: 'editorWin',
title: 'Portal Editor',
height: 600,
width: 800,
autoScroll: false,
layout: 'fit',
hidemode: 'offsets',
modal: true,
maximizable: true,
draggable: false,
closable: true,
bodyStyle: 'background:#FFFFFF',
resizable: false,
buttonAlign: 'center',
listeners: {
destroy: function (window) {}
},
items: [{
id: 'editorTabPanel',
xtype: 'tabpanel',
items: [{
id: 'tabNews',
title: 'News',
xtype: 'epanel',
hideMode: 'offsets',
store: jsonNewsAllStore,
storeAuthor: jsonNewsMyStore,
storePending: jsonNewsPendingStore,
approveItemUrl: newsApproveUrl,
editItemUrl: newsEditUrl,
saveItemUrl: newsSaveUrl,
deleteItemUrl: newsDeleteUrl,
colModel: newsCM,
form: newsForm,
tplMarkup: newsDetailTemplate
//, disabled: true
},
{
id: 'tabKnowledge',
title: 'Knowledge Base',
xtype: 'epanel',
hideMode: 'offsets',
store: jsonKBAllStore,
storeAuthor: jsonKBMyStore,
storePending: jsonKBPendingStore,
approveItemUrl: kbApproveUrl,
editItemUrl: kbEditUrl,
saveItemUrl: kbSaveUrl,
deleteItemUrl: kbDeleteUrl,
colModel: kbCM,
form: kbForm,
tplMarkup: kbDetailTemplate
//, disabled: true
},
{
id: 'tabAnnouncements',
title: 'Announcements',
xtype: 'epanel',
hideMode: 'offsets',
store: jsonAnnouncementAllStore,
storeAuthor: jsonAnnouncementMyStore,
storePending: jsonAnnouncementPendingStore,
approveItemUrl: announcementsApproveUrl,
editItemUrl: announcementsEditUrl,
saveItemUrl: announcementsSaveUrl',
deleteItemUrl: announcementsDeleteUrl,
colModel: announcementCM,
form: announcementForm,
tplMarkup: announcementDetailTemplate
//, disabled: true
},
{
id: 'tabLinks',
title: 'Links',
xtype: 'epanel',
hideMode: 'offsets',
store: jsonLinkAllStore,
storeAuthor: jsonLinkMyStore,
storePending: jsonLinkPendingStore,
approveItemUrl: linksApproveUrl,
editItemUrl: linksEditUrl,
saveItemUrl: linksSaveUrl,
deleteItemUrl: linksDeleteUrl,
colModel: linkCM,
form: linkForm,
tplMarkup: linkDetailTemplate
//, disabled: true
},
{
id: 'tabDocs',
title: 'Documents',
xtype: 'epanel',
hideMode: 'offsets'
//, store: jsonKBAllStore
,
colModel: kbCM,
form: docForm,
disabled: true
}]
}],
buttons: [{
text: 'Close',
handler: function () {
editorWin.close();
}
}]
});
editorWin.show();
} else {
editorWin.show()
}
Ext.getCmp('editorTabPanel').setActiveTab(tab);
}

828
4 Nov 2009, 11:34 AM
Anybody? Is the code no good? In Ext 3, should I be overriding the constructor instead of initComponent.

Like I said, it works, but it's slow, especially in IE.

I guess I just want to know if what I have done could use some work... or, this is the best performance I can expect in IE.

Thanks

Animal
4 Nov 2009, 11:38 AM
Are you really going to be creating lots of instances of editor.CardPanel?

Animal
4 Nov 2009, 11:40 AM
Because it LOOKs like you think you might want to only create that Window once, and reuse it, but don't really know how to use Javascript to do that.

828
5 Nov 2009, 5:17 AM
Yes, I only need the one instance of the window and reuse it. I guess that is what I am asking. Thank you. And yes, you are correct with javascript... I feel like I am getting better at it???


create that Window once, and reuse it, but don't really know how to use Javascript to do that.

Is there an example of what you are talking about? At least I can try and get an idea. Thanks Animal, big fan of yours.

828
5 Nov 2009, 6:28 AM
Okay, what direction should I lean to? Also, the window is fine, it's the tabs that I was trying to modify/reuse. Basically, they are all containing the same items (grid, a form, and a detail) only the data is just different.



Ext.namespace('editor');
editor = function () {
init: function () {
// create items
}
} ();
Ext.onReady(editor.init, editor);


OR



// MyPanel Extends Ext.Panel
MyPanel = Ext.extend(Ext.Panel, {
// constructor function
constructor: function (config) {
Ext.apply(this, {
// Put your pre-configured config options here
width: 300,
height: 300
});
MyPanel.superclass.constructor.apply(this, arguments);
}
});
var myfirstpanel = new MyPanel({
title: 'My First Panel'
});
var mysecondpanel = new MyPanel({
title: 'My Second Panel'
});


OR



function createMyPanel(config) {
return new Ext.Panel(Ext.apply({ //Pre-configured config options go here
width: 300,
height: 300
},
config));
};
var myfirstpanel = createMyPanel({
title: 'My First Panel'
});
var mysecondpanel = createMyPanel({
title: 'My Second Panel'
});


I guess that is what I am confused about? What is the right way? It seems like there is a lot of options out there and maybe I mixed them all up.

Animal
5 Nov 2009, 6:35 AM
Yes, you have found the dilemma.

Whether to create a subclass of whatever the base class is, or use a factory which just creates the base class configured the way you want it.

I would say that unless you are adding or overriding methods, then use a factory method.

As for that Window being reused, you must use closeAction: 'hide'.

And then before you invoke it, use Ext.getCmp("the-window-id") to see if it already exists, and if so, just show it.

828
6 Nov 2009, 5:24 AM
Alright Animal, one more question...

Here is my code... How can I create events using factory pattern. For example: LoadAll() - this will load all records on the current tab. Or, Edit - this will change to to form of the card panel and load the records. I figured the grid, form, and template I can just pass into the creation of each tab, however, I am not sure as to how to create events that are dependant on what tab is active.

Thank you for your help.




/**
* Editor Window
*/
// create namespace
Ext.namespace('Editor');
// reference local blank image
Ext.BLANK_IMAGE_URL = '../sys_art/s.gif';
//create application
Editor = function () {
// do not access Dom from here; elements don't exist yet
// private variables
var editorWindow;
var mainTabPanel;
var newsTab;
var knowledgeTab;
var announcementsTab;
var linksTab;
var documentsTab;
// private functions
function tab(config) {
return new Ext.Panel(Ext.apply({
//Pre-configured config options go here
layout: 'border',
defaults: {
border: false
},
items: [{
region: 'center',
layout: 'card',
activeItem: 0,
defaults: {
border: false
},
items: [{
layout: 'border',
defaults: {
border: false
},
items: [{
region: 'center',
html: 'grid',
stripeRows: true,
viewConfig: {
forceFit: true
}
},
{
region: 'south',
height: 250,
html: 'detail'
}]
},
{
html: 'form'
}]
},
{
region: 'west',
bodyStyle: 'background:#E4E4E4',
width: 150,
html: 'navigation'
}]
},
config));
}; // end of tab instructions
// public space
return {
// public properties, e.g. strings to translate
windowTitle: 'Portal Editor',
windowHeight: 600,
windowWidth: 800,
newsTabTitle: 'News',
kbTabTitle: 'Knowledge Base',
announcementsTabTitle: 'Announcements',
linksTabTitle: 'Links',
documentsTabTitle: 'Documents'
//public methods
,
init: function () {
newsTab = new tab({
title: this.newsTabTitle,
id: 'newsTab'
});
knowledgeTab = new tab({
title: this.kbTabTitle,
id: 'knowledgeTab'
});
announcementsTab = new tab({
title: this.announcementsTabTitle,
id: 'announcementsTab'
});
linksTab = new tab({
title: this.linksTabTitle,
id: 'linksTab'
});
documentsTab = new tab({
title: this.documentsTabTitle,
id: 'documentsTab'
});
mainTabPanel = new Ext.TabPanel({
items: [newsTab, knowledgeTab, announcementsTab, linksTab, documentsTab],
activeItem: 0,
border: false
});
editorWindow = new Ext.Window({
id: 'editorWindow',
title: this.windowTitle,
height: this.windowHeight,
width: this.windowWidth,
autoScroll: false,
layout: 'fit',
hidemode: 'offsets',
modal: true,
maximizable: true,
draggable: false,
closable: true,
closeAction: 'hide',
bodyStyle: 'background:#FFFFFF',
resizable: false,
buttonAlign: 'center',
items: [mainTabPanel],
buttons: [{
text: 'Close',
handler: function () {
editorWindow.hide();
}
}]
});
this.show();
},
show: function () {
editorWindow.show();
}
};
} ();
//end of app
Ext.onReady(Editor.init, Editor);
// end of file

Animal
6 Nov 2009, 6:01 AM
I understand "create events" to mean calling http://www.extjs.com/deploy/dev/docs/?class=Ext.util.Observable&member=addEvents

828
6 Nov 2009, 6:24 AM
Well, in my code above I have:



updateDetail: function (data) {
this.tpl.overwrite(this.detail.body, data);
},
onRowSelect: function (sm, rowIdx, r) {
var approverStatus = this.grid.getStore().reader.jsonData.CurrentUser.IsApprover;
if (r.data.Status != '0') {
this.btnApprove.setVisible(approverStatus);
this.btnReject.setVisible(approverStatus);
} else {
this.btnApprove.setVisible(false);
this.btnReject.setVisible(false);
}
this.btnEdit.setVisible(true);
this.btnDelete.setVisible(true);


With the new code, how can I incorporate those events? With factory pattern, do I have to give everything an ID and then add listener like - Ext.getCmp('cmpID').on('click', function(){}); ??? What if I want a custom action/event.

828
6 Nov 2009, 6:25 AM
Nevermind -
I would say that unless you are adding or overriding methods, then use a factory method.

Doesn't look like factory pattern is going to work for me.

mschwartz
6 Nov 2009, 6:44 AM
Factory works fine.



createWhatever: function(userConfig) {
var config = Ext.apply({}, userConfig, {
whatever: defaultValue,
another: defaultValue,
...
});
return new Ext.WhateverComponent(config);
}