PDA

View Full Version : Trying to get a menu (Menubar) to work in 'west' region of border layout



pwelby
23 Dec 2010, 11:30 AM
I am trying to create an application that works off a foundation of the 'card layout' application in Chap 16 and 17 of Jay Garcia's book, ExtJs in Action. I have a button bar set up with 3 buttons, and with each button press I open a new 'card'. In each card have a border layout, because each card will have its own functionality within the application, and the border layout will display all the info on the page that is required for the app. I have the button bar working well to change the cards, and as I said a new border layout opens with each card as well, but I am having trouble trying to get a menu set up in the 'west' region of the 'border' layout for each 'card'. I have looked into the accordian to use as a menu, and I have also looked into the old 'MenuBar' that is no longer being used by EXTJS( i believe) I found a working version of the code but I am not finding anything in the API or docs to support it now. I DO know that 'Animal' was working on it for a time. Anyway, the 'MenuBar' will reside in the 'west' panel of each border layout and will act as a menu structure to populate forms, and grids and other components in the 'center' region of each card.

Here is a small rendering of the code I have so far:



Ext.ns('app.form');
Ext.ns('app.loginWin');
Ext.ns('app.grid');
Ext.ns('app.window');

/**
* @class app.form.FormPanelBaseCls
* @extends Ext.form.FormPanel
* @constructor
* @param {Object} config The config object
**/

app.form.FormPanelBaseCls = Ext.extend(Ext.form.FormPanel, {

constructor : function(config) {
config = config || {};
Ext.applyIf(config, {
trackResetOnLoad : true
});
app.form.FormPanelBaseCls.superclass.constructor.call(this, config);
},

getValues : function() {
return this.getForm().getValues();
},
isValid : function() {
return this.getForm().isValid();
},
clearForm : function() {
var vals = this.getForm().getValues();
var clrVals = {};

for (var vName in vals) {
clrVals[vName] = '';
}

this.getForm().setValues(clrVals);
this.data = null;
},
onResetBtn : function() {
this.reset();
},
reset : function() {
this.getForm().reset();
},

loadData : function(data) {
if (data) {
this.data = data;
this.getForm().setValues(data);
}
else {
this.clearForm();
}
},
setValues : function(o) {
return this.getForm().setValues(o || {});
}
});

/**
* @class app.grid.EditorGridPanelBaseCls
* @extends Ext.grid.EditorGridPanel
* A base class for EditorGrids
* @constructor
* @param {Object} config The config object
**/

app.grid.EditorGridPanelBaseCls = function() {
app.grid.EditorGridPanelBaseCls.superclass.constructor.call(this,{
//Enter config options here for base class
title: 'Test Grid',
selModel: rowEditor,
height: 300
});
};
Ext.extend(app.grid.EditorGridPanelBaseCls, Ext.grid.EditorGridPanel, {});

Ext.override(Ext.tree.TreeEventModel, {
delegateClick: function(e, t){
if (this.beforeEvent(e)) {
if (e.getTarget('input[type=checkbox]')) {
var node = this.getNode(e);
if (node) {
node.getOwnerTree().onCheckClick(node, e, t);
}
return;
} else if (e.getTarget('.x-tree-ec-icon', 1)) {
this.onIconClick(e, this.getNode(e));
} else if (this.getNodeTarget(e)) {
this.onNodeClick(e, this.getNode(e));
}
} else {
this.checkContainerEvent(e, 'click');
}
}
});


/**
* @class app.loginWin.UserLoginWindow
* @extends Ext.Window
* A class to manage user logins
* @constructor
*/
app.loginWin.UserLoginWindow = Ext.extend(Ext.Window, {
/**
* @cfg scope [Object} A refrence to the handler scope
*/
/**
* @cfg handler {Object} A reference to a method to be called to process the login
*/
/**
* @private
* Configures the component, enforcing defaults
*/
initComponent : function() {
// Force defaults
Ext.apply(this, {
width : 500,
height : 200,
modal : true,
draggable : false,
title : 'Login to CAIMT tool',
layout : 'fit',
center : true,
closable : false,
resizable : false,
border : false,
items : this.buildForm(),
buttons : [
{
text : 'Login',
handler : this.handler || Ext.emptyFn,
scope : this.scope || this
}
]
});

app.loginWin.UserLoginWindow.superclass.initComponent.call(this);
},
//private builds the form.
buildForm : function() {

var formItemDefaults = {
allowBlank : true,
anchor : '-5',
listeners : {
scope : this,
specialkey : function(field, e) {
if (e.getKey() === e.ENTER && this.handler) {
this.handler.call(this.scope);
}
}
}
};

return {
xtype : 'form',
defaultType : 'textfield',
labelWidth : 100,
frame : true,
url : 'application/models/login_svc.php',
labelAlign : 'right',
defaults : formItemDefaults,
items : [{
xtype : 'textfield',
fieldLabel : 'Username',
blankText : 'Enter username here',
name : 'username',
id : 'username',
anchor : '95%',
stripCharsRe : /\s/ig,
bodyStyle : 'padding:5px 10px 5px 0'
},{
xtype : 'textfield',
fieldLabel : 'Password',
inputType : 'password',
name : 'password',
id : 'password',
value : '',
anchor : '95%',
stripCharsRe : /\s/ig,
bodyStyle : 'padding:5px 10px 5px 0'
},{
xtype : 'textfield',
fieldLabel : 'Domain',
name : 'domain',
id : 'domain',
value : 'NA',
anchor : '95%',
stripCharsRe : /\s/ig,
bodyStyle : 'padding:5px 10px 5px 0'
},{
xtype : 'textfield',
fieldLabel : 'Perforce Server<br>(host:port)',
name : 'p4_server',
id : 'p4_server',
value : 'ASWP401:1666',
anchor : '95%',
stripCharsRe : /\s/ig,
bodyStyle : 'padding:5px 10px 5px 0'
}]
};
}

});


var tabs = new Ext.TabPanel({
width:450,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[
{contentEl:'script', title: 'Short Text'},
{contentEl:'markup', title: 'Long Text'}
]
});

var card0 = new Ext.Panel({
id: 'card-0',
layout: 'fit',
html: 'this is a panel0'
});

var card1 = new Ext.Panel({
id: 'card-1',
layout: 'fit',
html: 'this is a panel1'
});

cardTabs = new Ext.Panel({
layout: 'fit',
border: true,
items: [ tabs ]
});

app.form.FormGrid = Ext.extend(Ext.Panel, {
layout: 'fit',
initComponent: function() {
items : [ {xtype: 'app_FormGrid'} ]
app.form.FormGrid.superclass.initComponent.call(this);
}

});
Ext.reg('my_FormGrid',app.form.FormGrid);


// main singleton
app.workspace = function() {
var viewport, tabPanel, cardPanel, loginWindow,
cookieUtil = Ext.util.Cookies;

return {
init: function() {

this.buildViewPort();

// BYPASS LOGIN ROUTINE - UNCOMMENT AFTER DEBUG MENU
//if (! cookieUtil.get('loginCookie')) {
// if (! loginWindow) {
// loginWindow = this.buildLoginWindow();
// }
// loginWindow.show();
// }
// else {
// this.buildViewPort();
// }
},
buildLoginWindow: function() {
return new app.loginWin.UserLoginWindow({
title: 'Login Screen',
scope: this,
handler: this.onLogin
});
},
buildViewPort: function() {
integrationToolsTabs = new Ext.TabPanel({
width:700,
height: 500,
activeTab: 0,
itemId: 'current_viewport',
defaults: { workspace: this },
items:[{
xtype: 'app_FormPanel',
title:'Integration Form',
bodyStyle: 'padding: 10px',
frame: true
},{
xtype: 'app_GridPanel',
title: 'Integration Grid',
frame: true
}]
});

cardPanel = new Ext.Panel({
layout: {
type: 'card',
align: 'stretch',
deferredRender: false
},
border: true,
itemId: 'current_viewport',
activeItem: 0,
defaults: {
workspace: this,
align: 'stretch'
},
items: [
{ xtype: 'app_IntToolsPanel' },
{ xtype: 'app_AdminToolsPanel' },
{ xtype: 'app_GridPanel' }
],
tbar : [
{
text: 'Integration Tools',
itemType: 'app_IntToolsPanel',
scope: this,
toggleGroup: 'navGrp',
enableToggle: true,
pressed: true,
handler: this.onSwitchPanel
},
'-',
{
text: 'Admin',
itemType: 'app_AdminToolsPanel',
scope: this,
toggleGroup: 'navGrp',
enableToggle: true,
handler: this.onSwitchPanel
},
'-',
{
text: 'Help',
itemType: 'app_GridPanel',
scope: this,
toggleGroup: 'navGrp',
enableToggle: true,
handler: this.onSwitchPanel
},
{
xtype: 'tbfill'
},
{
text: 'Log Out',
iconCls: 'icon-door_out',
scope: this,
icon: 'application/views/images/icons/door_out.png',
handler: this.onLogout
}
]
});
viewport = new Ext.Viewport({
layout: 'fit',
items: cardPanel
});

Ext.getBody().unmask();


},
createFormGrid: function() {
// tabs for the center
var lilTabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},

items:[{
title: 'Bogus Tab',
html: 'tab1'
},{
title: 'Another Tab',
html: 'tab2'
},{
title: 'Closable Tab',
html: 'close tab',
closable:true
}]
});

// Panel for the west
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3'
});

var win = new Ext.Window({
title: 'Layout Window',
closable:true,
width:600,
height:350,
//border:false,
plain:true,
layout: 'border',

items: [nav, lilTabs]
});

win.show(this);
},
onLogin: function() {
var form = loginWindow.get(0);
//if (form.getForm().isValid()) {
if (form.getForm()) {
loginWindow.el.mask('Please wait...', 'x-mask-loading');

form.getForm().submit({
success : function(form, action) {
obj = Ext.util.JSON.decode(action.response.responseText);
isAdmin = obj.admin;

var resultMessage = obj.message;
var successMessage = obj.success;

//console.log("Message: " + resultMessage + " Success: " + successMessage );

if (successMessage) {
if (successMessage == true) {
this.onLoginSuccess();
}
else {
this.onLoginFailure();
}
}
/* if ( resultMessage == 'Authenticated.' ) {

/* var user_name;
top.username = Ext.getCmp('username').getValue();

Ext.getCmp('CSpecForm').enable();
Ext.getCmp('PLFForm').enable();
Ext.getCmp('BuildTab').enable();
Ext.getCmp('userBuildfilesForm').enable();
Ext.getCmp('ReleaseTab').enable();
//Ext.getCmp('QuickBuildTab').enable();
//Ext.getCmp('APItab').enable();
//Ext.getCmp('chartingForm1').enable();
//Ext.getCmp('slocTab').enable();

Ext.getCmp('GroupTabPanel').setActiveTab(1);

// Enable logout button
Ext.getCmp('logoutBtn').enable();

}
if (successMessage === false) {
Ext.Msg.alert('Error',resultMessage);
return;
}
if (isAdmin) {
if (isAdmin == 'Y') {
Ext.Msg.alert('Response','You are admin');
}
else {
Ext.Msg.alert('Response','You are not admin');
}
}
else {
this.onLoginFailure();
} */
},
failure:function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Your Login Failed!', obj.message);
this.onLoginFailure();
}else{
Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
this.onLoginFailure();
}

},
scope: this
});
}
},
onLoginSuccess: function() {
loginWindow.el.unmask();

this.buildViewPort();
loginWindow.destroy();
loginWindow = null;
},
onLoginFailure: function() {
loginWindow.el.unmask();
Ext.MessageBox.alert('Failure','Login failed. Please try again');
},

onLogout: function() {
Ext.MessageBox.confirm(
'Please confirm',
'Are you sure you want to log out?',
function(btn) {
if (btn === 'yes') {
this.doLogout();
}
},
this
);
},
doLogout: function() {
Ext.getBody().mask('Loggging out...','x-mask-loading');

Ext.Ajax.request({
url: 'userlogout.php',
params: { user: cookieUtil.get('loginCookie') },
scope: this,
callback :this.onAfterAjaxReq,
succCallback: this.onAfterLogout
});


},
onAfterLogout: function(jsonData) {
this.destroy();
},

onSwitchPanel: function(btn) {
var xtype = btn.itemType,
panels = cardPanel.findByType(xtype),
newPanel = panels[0];

var newCardIndex = cardPanel.items.indexOf(newPanel);
this.switchToCard(newCardIndex, newPanel);

},
switchToCard: function(newCardIndex, newPanel) {

var layout = cardPanel.getLayout(),
activePanel = layout.activeItem,
activePanelIdx = cardPanel.items.indexOf(activePanel);

if (activePanelIdx !== newCardIndex) {
layout.setActiveItem(newCardIndex);

if (newPanel.cleanSlate) {
newPanel.cleanSlate();
}
}
console.log('activePanelIdx: ' + activePanelIdx);
console.log(arguments);
},

onAfterAjaxReq: function(options, success, result) {
Ext.getBody().unmask();
if (success === true) {
var jsonData;
try {
jsondata = Ext.decode(result.responseText);
}
catch (e) {
Ext.MessageBox.alert(
'Error',
'Data returned is not valid'
);
}
options.succCallback.call(options.scope,
jsonData, options);
}
else {
Ext.messageBox.alert('Error', 'the web transaction failed');
}
},

destroy: function() {
viewport.destroy();
viewport = null;
cardPanel = null;
this.init();
},
clearMask: function() {
Ext.getBody().unmask();
},
cleanSlate: function() {
// refresh view for the 'itemId' of buildViewPort
this.getComponent('current_viewport').refreshView();
}

};
}();



//Ext.onReady(app.workspace.init, sideMenu.init, app.workspace);
Ext.onReady(function() {

// create an instance of the app
var catApp = app.workspace.init({
renderTo: document.body
});
//sideMenu.show(Ext.get('app-menu'), '');
//var sideMenu = sideMenu.init({



// We can retrieve a reference to the data store
// via the StoreMgr by its storeId
//Ext.StoreMgr.get('crmStore').load();

});

//var newGrid = new app.grid.GridPanel;

CrmStore = Ext.extend(Ext.data.JsonStore, {
storeId: "crmStore",
constructor: function() {
CrmStore.superclass.constructor.call(this, {
fields : ['ID', 'NAME', 'PLF_NAME', 'PERFORCE_PATH'],
autoLoad : true,
root: 'data',
proxy: new Ext.data.HttpProxy({
url : 'application/models/crm/list_svc.php',
method : 'GET'
})
});
}
});
var crm_Store = new CrmStore();

app.form.integrationToolsTabs = Ext.extend(Ext.TabPanel, {
width:700,
height: 500,
activeTab: 0,

viewConfig: {
forceFit: true
},
initComponent: function() {

Ext.apply(this, {
items:[{
xtype: 'app_FormPanel',
title:'Integration Form',
bodyStyle: 'padding: 20px',
frame: true
},{
xtype: 'app_GridPanel',
title: 'Integration Grid',
frame: true
}],
scope: this
});
app.form.integrationToolsTabs.superclass.initComponent.call(this);
},

});
Ext.reg('app_FormGrid', app.form.integrationToolsTabs);

var sideMenu = function() {
var navMenuBar;

return {
init : function() {
navMenuBar = new Ext.menu.Menubar({
orientation: "vertical",
items: [
{
text : 'Cspec',
canActivate : true,
cls : 'menuItem',
//menu: {items: []},
handler: this.foo

},
{
text : 'PLF',
cls : 'menuItem',
menu : {
items: [
{text:"CRM", e:null, handler: this.foo},
{text:"Engineering", e:null},
{text:"Temp", e:null}
]
}

},
{
text : 'Admin',
cls : 'menuItem',
menu : {
items: [
{text:"Users", e:null},
{text:"Targets", e:null},
{text:"Product Lines", e:null}
]
}

},
{
text : 'Help',
cls : 'menuItem',
menu : {
items: [
{text:"Help item 1", e:null},
{text:"Help item 2", e:null},
{text:"Help item 3", e:null}
]
}
}
]
});

navMenuBar.show(Ext.get("menu-bar"), "");
},
foo : function() {
alert("Foo Called");
},
bar : function() {
alert("Bar Called");
}
};
}();


myTree = Ext.extend(Ext.ux.tree.ColumnTree, {
initComponent: function() {
Ext.apply(this, {
width: 550,
height: 500,
rootVisible:false,
autoScroll:true,
title: ' ',
selModel: new Ext.tree.MultiSelectionModel(),
frame: false,
renderTo: Ext.getBody(),
columns:[{
//header:'Task',
width:'100%',
dataIndex:'task'
}],
loader: new Ext.tree.TreeLoader({
/* proxy: new Ext.data.HttpProxy({
//url : 'application/models/user_build_files/list_svc.php', //wrong service file
dataUrl:'application/views/column-data.json',
method : 'GET'
}), */
dataUrl:'application/views/column-data.json',
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text:'Tasks'
})
});
myTree.superclass.initComponent.call(this);

var delay = 50;
this.on({
scope: this,
click: {
scope: this,
buffer: delay,
fn: this.onNodeClick
}
});
},
onNodeClick: function(e) {
var myId = this.getNode(e);
console.log(e, myId);
//alert('Clicked node');
var myNode = this.getNode(e);
//this.onNodeClick(e, this.getNode(e));
console.log(myNode);
},
getNode : function(e){
var t;
var data = e.data, target = e.target;
console.log(data, target);
return;
if(t = e.getTarget('.x-tree-node-el', 10)){
var id = Ext.fly(t, '_treeEvents').getAttribute('tree-node-id', 'ext');
if(id){
return this.getNodeById(id);
}

}
return null;
}



});
Ext.reg('treeMenu', myTree);

// Deleter for grid - called from base class
RowEditor = Ext.extend(Ext.grid.RowSelectionModel, {

width: 30,
sortable: false,
dataIndex: 0, // this is needed, otherwise there will be an error
menuDisabled: true,
fixed: true,
id: 'deleter',
initEvents: function(){
RowEditor.superclass.initEvents.call(this);
this.grid.on('cellclick', function(grid, rowIndex, columnIndex, e){
if(columnIndex==grid.getColumnModel().getIndexById('deleter')) {
var record = grid.getStore().getAt(rowIndex);
if ( record ){
var getData = grid.getSelectionModel().getSelected();
var sel = getData.get('NAME');
var selID = getData.get('ID');
if ( getData ){
Ext.Msg.show({
title : 'Remove Section',
buttons : Ext.MessageBox.YESNO,
msg : 'Remove '+sel+'?',
fn : function(btn){
if (btn == 'yes'){
// call remove service
Ext.Ajax.request({
url : 'application/models/plf/section/remove_svc.php',
params : {section_id: selID },
method : 'POST',
success : function(response) {
grid.getStore().reload();
}
});
}
}
});
}
}
}
});
this.grid.on('rowclick', function(grid, rowIndex, columnIndex, e){
//if(columnIndex==grid.getColumnModel().getIndexById('deleter')) {
var record = grid.getStore().getAt(rowIndex);
if ( record ){
var getData = grid.getSelectionModel().getSelected();
var sel = getData.get('NAME');
var selID = getData.get('ID');
if ( getData ){
Ext.Msg.show({
title : 'Remove Row',
buttons : Ext.MessageBox.YESNO,
msg : 'Remove '+sel+'?',
fn : function(btn){
if (btn == 'yes'){
// call remove service
Ext.Ajax.request({
url : 'application/models/plf/section/remove_svc.php',
params : {section_id: selID },
method : 'POST',
success : function(response) {
grid.getStore().reload();
}
});
}
}
});
}
}
//}
});
},
renderer: function(v, p, record, rowIndex){
return '<div class="extensive-remove" style="width: 15px; height: 16px;"></div>';
}
});
var rowEditor = new RowEditor();

// Create Column model for grid instance
var myColumnModel = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},
columns: [
{
header : 'First Name',
dataIndex : 'NAME'
},
{
header : 'PLF',
dataIndex : 'PLF_NAME'
},
{
header : 'Perforce path',
dataIndex : 'PERFORCE_PATH'
}, rowEditor
]
});

// Create grid instance as an extension of the EditorGridPanel base class
app.grid.myEditorGrid = Ext.extend(app.grid.EditorGridPanelBaseCls, {

viewConfig : {
forceFit : true
},
initComponent : function() {
//this.selModel = new Ext.grid.RowSelectionModel({singleSelect:true});
//this.relayEvents(this.selModel, ['selectionchange']);

Ext.apply(this, {
store: crm_Store,
cm : myColumnModel,
scope: this,
stripeRows: true
});
app.grid.myEditorGrid.superclass.initComponent.call(this);
}

});
Ext.reg('app_GridPanel', app.grid.myEditorGrid); // register as xtype

// Create form instance as an extension of the FormPanel base class
app.form.FormPanel = Ext.extend(app.form.FormPanelBaseCls, {
viewConfig : {
forceFit : true
},
initComponent : function() {

Ext.apply(this, {
defaultType : 'textfield',
overflow : 'scroll',
width: 650,
//trackResetOnLoad : true,
buttonAlign : 'right',
items : this.buildItems(),
buttons : this.buildButtons()
});

app.form.FormPanel.superclass.initComponent.call(this);
// Fired by save button
this.addEvents('savebtn');
},

buildButtons : function() {
return [
{
xtype : 'button',
layout : 'hbox',
text : 'Submit',
scope : this,
handler : this.onSubmitBtn
},
{
xtype : 'button',
text : 'Clear',
scope : this,
handler : this.onResetBtn
}
];
},
buildItems : function() {
return [{
xtype: 'combo',
store : crm_Store,
displayField : 'NAME',
valueField : 'ID',
itemId : 'comboBaseCRM',
anchor : '98%',
name : 'COMBO',
mode : 'local',
triggerAction : 'all',
fieldLabel : 'Base CRM',
emptyText : 'Select a CRM build...',
listeners : {
'select' : {
scope : this,
fn : function (combo, record) {
top.BaseCRM = record.get('NAME');
var perforce_path = record.get('PERFORCE_PATH');
var plf_name = record.get('PLF_NAME');
//Ext.getCmp('BasePLFName').setValue(plf_name);
//Ext.getCmp('BasePLFPath').setValue(perforce_path);

var base_cspec = 'CRM_'+ top.BaseCRM;
Ext.Msg.alert('Response',base_cspec);

var buildCommentTextarea = this.getComponent('CommentField');
buildCommentTextarea.setValue(base_cspec);
}
}// close for 'select'
}
},
{
xtype : 'textfield',
name : 'NAME',
fieldLabel : 'First Name'
},
{
xtype : 'textfield',
name : 'PLF_NAME',
fieldLabel : 'Last Name'
},
{
xtype : 'textfield',
name : 'PERFORCE_PATH',
fieldLabel : 'Age'
},
{
xtype : 'textarea',
fieldLabel : 'Comment',
itemId : 'CommentField',
width : 550,
height : 275,
overflow : scroll
}
];
},
onSubmitBtn : function() {
var vals = this.getForm().getValues();
Ext.Msg.alert('Response','Combo value: ' + vals.COMBO + '<br>Name: ' + vals.NAME + ' <br>Last name: ' + vals.PLF_NAME + ' <br>Age: ' + vals.PERFORCE_PATH);

this.fireEvent('savebtn', this, vals);
}
});
Ext.reg('app_FormPanel', app.form.FormPanel); // register as xtype

//Create form panel as extension of FormPanelBaseCls
app.form.AdminForm1 = Ext.extend(app.form.FormPanelBaseCls, {
viewConfig : {
forceFit : true
},
initComponent : function() {

Ext.apply(this, {
defaultType : 'textfield',
overflow : 'scroll',
//trackResetOnLoad : true,
width: 650,
buttonAlign : 'right',
items : this.buildItems(),
buttons : this.buildButtons()
});

app.form.AdminForm1.superclass.initComponent.call(this);

// Fired by save button
this.addEvents('savebtn');
},

buildButtons : function() {
return [
{
xtype : 'button',
layout : 'form',
text : 'Submit Admin Form',
scope : this,
handler : this.onSubmitBtn
},
{
xtype : 'button',
text : 'Clear Admin Form',
scope : this,
handler : this.onResetBtn
}
];
},
buildItems : function() {
return [
{
xtype : 'textfield',
name : 'NAME',
fieldLabel : 'First Name'
},
{
xtype : 'textfield',
name : 'PLF_NAME',
fieldLabel : 'Last Name'
},
{
xtype : 'textfield',
name : 'PERFORCE_PATH',
fieldLabel : 'Age'
},
{
xtype : 'textarea',
fieldLabel : 'Comment',
itemId : 'CommentField',
width : 550,
height : 275,
overflow : scroll
}
];
},
onSubmitBtn : function() {
var vals = this.getForm().getValues();
Ext.Msg.alert('Response','Combo value: ' + vals.COMBO + '<br>Name: ' + vals.NAME + ' <br>Last name: ' + vals.PLF_NAME + ' <br>Age: ' + vals.PERFORCE_PATH);

this.fireEvent('savebtn', this, vals);
}
});
Ext.reg('app_AdminForm1', app.form.AdminForm1);

app.form.IntegrationTools = Ext.extend(Ext.Panel, {
viewConfig: {
forceFit: true
},
layout: {
type: 'border',
align: 'stretch',
},
defaults: {
frame: true,
split: true
},
initComponent: function() {

Ext.apply(this, {
items:[{
title: 'Integration Tools',
region: 'center',
html: 'Content area',
items : [ {xtype: 'app_FormPanel'} ]
},{
width: 200,
region: 'west',
//html: 'List view',
collapsible: true,
frame: true,
items: [ { xtype: 'treeMenu' } ]

}],
scope: this
});
app.form.IntegrationTools.superclass.initComponent.call(this);
sideMenu.init();
},

});
Ext.reg('app_IntToolsPanel', app.form.IntegrationTools);

app.form.AdminTools = Ext.extend(Ext.Panel, {
viewConfig: {
forceFit: true
},
layout: {
type: 'border',
align: 'stretch',
deferredRender: false,
layoutOnTabChange: true
},
defaults: {
frame: true,
split: true
},
initComponent: function() {

Ext.apply(this, {
items:[{
title: 'Admin Tools',
region: 'center',
html: 'Content area',
items : [ {xtype: 'app_AdminForm1'} ]
},{
width: 200,
region: 'west',
//html: 'List view',
collapsible: true,
frame: true,
items: [ { xtype: 'treeMenu' } ]
}
],
scope: this
});
app.form.IntegrationTools.superclass.initComponent.call(this);
},

});
Ext.reg('app_AdminToolsPanel', app.form.AdminTools);




...and here is the MenuBar code, style and markup I am using to call the MenuBar:



//menubar.js:
Ext.menu.Menubar = function(config){
Ext.applyIf(config, {
plain: true,
cls: ""
});
Ext.menu.Menubar.superclass.constructor.call(this, config);

this.cls += " x-menubar";
if (this.orientation == "vertical") {
this.subMenuAlign = "tl-tr?";
this.cls += " x-vertical-menubar";
} else {
this.subMenuAlign = "tl-bl?";
this.cls += " x-horizontal-menubar";
}
};

Ext.extend(Ext.menu.Menubar, Ext.menu.Menu, {
minWidth : 130,
shadow : false,
orientation: "horizontal",

hide: function() {
if(this.activeItem){
this.activeItem.deactivate();
delete this.activeItem;
}
},
onClick : function(e){
if (this.activeItem) {
this.activeItem.deactivate();
delete this.activeItem;
}
else {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
} else if (t.handler) {
t.fireEvent("click", t);
}
}
this.fireEvent("click", this, e, t);
}
},
onMouseOver : function(e){
if (this.activeItem) {
var t;
if(t = this.findTargetItem(e)){
if(t.canActivate && !t.disabled){
this.setActiveItem(t, true);
}
}
this.fireEvent("mouseover", this, e, t);
}


},
onMouseOut : function(e){
var g;
if(g = this.findTargetItem(e)){
if(g.canActivate && !g.disabled){
this.setActiveItem(g, false);
}
}
this.fireEvent("mouseout", this, e, g);

}
});

///////////////////////////

/* menubar.css */

* {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 12px;
line-height: 1.25em;
color: black;
}

html, body {
height: 100%;
}

.x-menubar {
background-color:#deecfd
}
.x-horizontal-menubar {
width:100%!important;
border-left:0px none;
border-right:0px none;
}
.x-horizontal-menubar > .x-menu-list {
float:left;
width:100%;
border-left:0px none;
border-right:0px none;
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item {
text-decoration:none;
padding-left:0px;
padding-right:10px;
margin-left:10px;
float:left;
background-image:none
}
.x-horizontal-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item-arrow {
background: transparent url(ext/resources/images/default/menu/menubar-parent.gif) no-repeat scroll right 0.6em;
padding-right:15px;
}
.x-menubar > .x-menu-list > .x-menu-list-item > .x-menu-item > .x-menu-item-icon {
display:none;
}

ul.x-menu-list li {
margin: 0;
}

.menuHeader {
background-color: yellow;
color: white;
cursor: help;
}

.menuItem {
margin-left: 0px;

}

a.menuItem:hover {
text-decoration: underline;
font-weight: bold;
}

div#content {
margin-left: 80px;
}

//////////////////

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabpanel main</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="library/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="application/views/menubar.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="library/extjs/ux/css/Portal.css" />
<link rel="stylesheet" type="text/css" href="library/extjs/ux/css/GroupTab.css" />
<link rel="stylesheet" type="text/css" href="library/extjs/ux/css/RowEditor.css" />

<link rel="stylesheet" type="text/css" href="application/views/style.css" />


<!-- page specific -->
<style type="text/css" >
.extensive-remove {
background-image: url(application/views/images/icons/delete.png) ! important;
}
</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="library/extjs/adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="library/extjs/ext-all-debug.js"></script>

<!-- overrides to base library -->
<script type="text/javascript" src="library/extjs/ux/ColumnNodeUI.js"></script>
<script type="text/javascript" src="application/views/menuBar.js"></script>

<!-- PAGE code --->
<script type="text/javascript" src="application/views/app.tabpanel.main.js"></script>

</head>
<body><div id="menu-bar" style="margin-top:250px" ></div></body>
</html>



As you can see, the menubar is called to render by this line: navMenuBar.show(Ext.get("menu-bar", 'tl-tl'));

...and this renders the MenuBar to show in the DIV, BUT, I need it to render in the west region of the border layout. It appears that the MenuBar is rendered like a window. So how do I render it into the west region panel container so that I can use it as a menu? I have been trying to find and answer to this for close to 5 days now.

ANY HELP APPRECIATED!!!

Animal
23 Dec 2010, 10:28 PM
"render into"?

It should be the west region.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.menu.Menu&member=floating

PaulyWolly
24 Dec 2010, 1:46 AM
ok, so I add 'floating: false' in the MenuBar config. This makes the menu now a child part of the west panel container. But how will I render it into the container to show in or as the region? ".show(Ext.get())" has me rendering it in the DIV, does it not? I do not want to create a DIV on the page and render the menu into that DIV. I want the menu container to be in the west region or to BE the west region as you state... and for that matter when a new card is called I need to have the menu hide till the next border layout renders.

Animal
24 Dec 2010, 2:10 AM
Not a child. It should BE the west region.

PaulyWolly
24 Dec 2010, 11:22 AM
You can see my code attached. Can you offer an example of what you mean by... "it should BE the west region"?