PDA

View Full Version : ExtJS 4.0.7 Bugs - Accordian



lorezyra
18 Jan 2012, 6:20 PM
I have a TabPanel with the border layout with grid and accordian child components. I have configured all but 1 panel under the accordian layout to be hidden.

30809

Here's the UI code:

Ext.define('RichieBartlett.view.ui.resumeTAB', {
extend: 'Ext.tab.Panel',

border: 0,
id: 'resumeTAB',
itemId: 'resumeTAB',
layout: {
type: 'border'
},
iconCls: 'icon-TABresumes',
title: 'Resume Manager',
minTabWidth: 150,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
id: 'requestProfileTAB',
layout: {
type: 'border'
},
title: 'Profiles',
items: [
{
xtype: 'gridpanel',
id: 'resumeProfilesGrid',
itemId: 'resumeProfilesGrid',
minWidth: 490,
style: {
borderSpacing: 0
},
width: 600,
store: 'resumeProfile',
region: 'west',
split: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'resumeProfilesAdd',
itemId: 'resumeProfilesAdd',
iconCls: 'icon-BlogMenuNew',
text: 'Add'
},
{
xtype: 'button',
disabled: true,
id: 'resumeProfilesDel',
itemId: 'resumeProfilesDel',
iconCls: 'icon-BlogMenuDel',
text: 'Remove'
},
{
xtype: 'button',
id: 'resumeProfilesReload',
itemId: 'resumeProfilesReload',
iconCls: 'icon-reload',
text: 'Reload'
},
{
xtype: 'tbfill'
},
{
xtype: 'triggerfield',
id: 'resumeSearchFilter',
itemId: 'resumeSearchFilter',
width: 150,
inputId: 'resumeSearchFilterI',
submitValue: false,
emptyText: 'Search Profiles',
enableKeyEvents: true,
hideTrigger: true
},
{
xtype: 'button',
id: 'resumeSearchFilterFind',
itemId: 'resumeSearchFilterFind',
iconCls: 'icon-filter'
},
{
xtype: 'button',
id: 'resumeSearchFilterClear',
itemId: 'resumeSearchFilterClear',
iconCls: 'icon-filterClear'
}
]
},
{
xtype: 'pagingtoolbar',
id: 'resumeProfilesGridPageBar',
itemId: 'resumeProfilesGridPageBar',
displayInfo: true,
store: 'resumeProfile',
dock: 'bottom'
}
],
viewConfig: {
styleHtmlContent: true,
autoScroll: true,
emptyText: 'No Profiles found. <BR>Click on the "Add" button above to create a profile.',
loadingText: 'Waiting for Resume list...',
singleSelect: true,
trackOver: true
},
selModel: Ext.create('Ext.selection.RowModel', {
mode: 'MULTI'
}),
columns: [
{
xtype: 'numbercolumn',
width: 50,
dataIndex: 'id',
text: 'ID',
format: 0
},
{
xtype: 'booleancolumn',
width: 45,
dataIndex: 'visible',
text: 'Visible'
},
{
xtype: 'gridcolumn',
width: 125,
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'datecolumn',
width: 175,
dataIndex: 'created',
text: 'Created',
format: 'Y/m/d G:i:s'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'summary',
text: 'Summary'
}
]
},
{
xtype: 'container',
id: 'resumeManager',
itemId: 'resumeManager',
minWidth: 550,
defaults: {
autoScroll: true,
collapsed: true,
titleCollapse: true
},
layout: {
type: 'accordion'
},
region: 'center',
items: [
{
xtype: 'form',
hidden: true,
id: 'resumeForm',
itemId: 'resumeForm',
layout: {
type: 'fit'
},
bodyPadding: 10,
collapsed: true,
title: 'Profile Details',
titleCollapse: true,
region: 'center',
items: [
{
xtype: 'container',
height: 30,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'textfield',
id: 'resumeProfileName',
itemId: 'resumeProfileName',
name: 'resumeProfileName',
fieldLabel: 'Profile Name',
allowBlank: false,
blankText: 'Profile Name is required!',
emptyText: 'Enter Resume Profile name...',
minLength: 4,
flex: 3
},
{
xtype: 'checkboxfield',
id: 'resumeProfileVisible',
itemId: 'resumeProfileVisible',
name: 'resumeProfileVisible',
fieldLabel: '&nbsp;',
labelSeparator: '&nbsp;',
labelWidth: 15,
boxLabel: 'Visible',
flex: 1
}
]
},
{
xtype: 'textareafield',
id: 'resumeProfileDescript',
itemId: 'resumeProfileDescript',
minHeight: 300,
minWidth: 400,
name: 'resumeProfileDescript',
fieldLabel: 'Summary',
emptyText: 'Short Summary of this resume profile. (i.e.) Highlight your best qualities for this resume...',
anchor: '100%'
},
{
xtype: 'hiddenfield',
id: 'resumeProfileID',
itemId: 'resumeProfileID',
name: 'resumeProfileID',
anchor: '100%'
},
{
xtype: 'container',
layout: {
align: 'middle',
type: 'hbox'
},
anchor: '100%',
items: [
{
xtype: 'button',
height: 25,
id: 'resumeProfSave',
itemId: 'resumeProfSave',
text: 'Save',
flex: 1,
margins: '5 5 0 5'
},
{
xtype: 'button',
height: 25,
id: 'resumeProfReset',
itemId: 'resumeProfReset',
text: 'Reset',
flex: 1,
margins: '5 5 0 5'
}
]
}
]
},
{
xtype: 'gridpanel',
hidden: true,
id: 'resumeFiles',
itemId: 'resumeFiles',
width: 150,
collapsed: true,
title: 'Files',
titleCollapse: true,
store: 'resumeFiles',
region: 'west',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'container',
html: '&nbsp;&nbsp;* Filename must be supported in English Unix characters... Server does <i>not</i> support Unicode filenames at this time.',
styleHtmlContent: true
}
]
},
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'resumeProfileFileAdd',
itemId: 'resumeProfileFileAdd',
width: 100,
iconCls: 'icon-fileImport',
text: 'Add Resume'
},
{
xtype: 'tbspacer'
},
{
xtype: 'button',
id: 'resumeProfileFileDel',
itemId: 'resumeProfileFileDel',
width: 100,
iconCls: 'icon-fileDel',
text: 'Delete'
},
{
xtype: 'tbspacer'
},
{
xtype: 'button',
id: 'resumeProfileFileReload',
itemId: 'resumeProfileFileReload',
width: 100,
iconCls: 'icon-reload',
text: 'Reload'
}
]
}
],
viewConfig: {
frame: true,
emptyText: 'No resumes uploaded...',
loadingText: 'Scanning Files...'
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {

})
],
columns: [
{
xtype: 'numbercolumn',
hidden: true,
width: 50,
dataIndex: 'id',
text: 'Id',
format: 0
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'filename',
text: 'Filename'
},
{
xtype: 'gridcolumn',
width: 75,
dataIndex: 'type',
text: 'Type'
},
{
xtype: 'numbercolumn',
width: 80,
dataIndex: 'size',
text: 'Size'
},
{
xtype: 'numbercolumn',
width: 120,
dataIndex: 'lang',
text: 'Language'
},
{
xtype: 'gridcolumn',
width: 100,
dataIndex: 'dTime',
text: 'DateTime'
}
]
},
{
xtype: 'form',
hidden: true,
id: 'resumeLinks',
itemId: 'resumeLinks',
width: 150,
defaults: {
labelWidth: 70
},
layout: {
type: 'fit'
},
bodyPadding: 10,
collapsed: true,
title: 'Links',
titleCollapse: true,
region: 'east',
items: [
{
xtype: 'fieldset',
defaults: {
labelWidth: 70
},
title: 'URL Details',
items: [
{
xtype: 'container',
height: 25,
layout: {
align: 'stretch',
type: 'hbox'
},
anchor: '100%',
items: [
{
xtype: 'textfield',
id: 'resumeLinkName',
itemId: 'resumeLinkName',
name: 'resumeLinkName',
fieldLabel: 'Link Name',
labelWidth: 70,
emptyText: 'Text to represent the URL link...',
flex: 5
},
{
xtype: 'checkboxfield',
id: 'resumeLinkShow',
itemId: 'resumeLinkShow',
name: 'resumeLinkShow',
fieldLabel: '&nbsp;',
labelSeparator: '&nbsp;',
labelWidth: 15,
boxLabel: 'Visible',
flex: 1
}
]
},
{
xtype: 'textareafield',
id: 'resumeLinkDescript',
itemId: 'resumeLinkDescript',
name: 'resumeLinkDescript',
fieldLabel: 'Description',
emptyText: 'Enter a short description regarding URL...',
anchor: '100%'
},
{
xtype: 'hiddenfield',
id: 'resumeLinkID',
itemId: 'resumeLinkID',
name: 'resumeLinkID',
value: 0,
anchor: '100%'
},
{
xtype: 'hiddenfield',
itemId: 'MAX_FILE_SIZE',
name: 'MAX_FILE_SIZE',
value: 8000000
},
{
xtype: 'fieldset',
id: 'resumeLinkImg',
itemId: 'resumeLinkImg',
layout: {
align: 'stretchmax',
type: 'hbox'
},
checkboxToggle: true,
collapsed: true,
title: 'Image to represent the Link',
anchor: '100%',
items: [
{
xtype: 'container',
width: 80,
layout: {
type: 'anchor'
},
flex: 1,
items: [
{
xtype: 'radiofield',
id: 'resumeLinkRadioFile',
itemId: 'resumeLinkRadioFile',
name: 'resumeLinkRadioFe',
value: 'F',
labelPad: 10,
boxLabel: 'Local'
},
{
xtype: 'radiofield',
id: 'resumeLinkRadioURL',
itemId: 'resumeLinkRadioURL',
name: 'resumeLinkRadioFe',
value: 'U',
labelPad: 10,
boxLabel: 'URL'
}
]
},
{
xtype: 'container',
layout: {
type: 'anchor'
},
flex: 6,
items: [
{
xtype: 'filefield',
disabled: true,
id: 'resumeLinkLocal',
itemId: 'resumeLinkLocal',
name: 'resumeLinkLocal',
emptyText: 'No File Selected',
buttonText: 'Attach File...',
anchor: '100%'
},
{
xtype: 'textfield',
disabled: true,
id: 'resumeLinkURL',
itemId: 'resumeLinkURL',
name: 'resumeLinkURL',
emptyText: 'http://',
anchor: '100%'
}
]
}
]
},
{
xtype: 'textfield',
id: 'resumeLinkURLaddress',
itemId: 'resumeLinkURLaddress',
name: 'resumeLinkURLaddress',
fieldLabel: 'Link',
emptyText: 'http://',
anchor: '100%'
},
{
xtype: 'progressbar',
hidden: true,
id: 'resumeLinkProgress',
itemId: 'resumeLinkProgress',
margin: 5,
animate: true,
text: 'Upload: ',
value: 0.01,
anchor: '100%'
}
]
},
{
xtype: 'gridpanel',
height: 250,
id: 'resumeLinkGrid',
itemId: 'resumeLinkGrid',
store: 'resumeLinks',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
height: 25,
id: 'resumeLinkSave',
itemId: 'resumeLinkSave',
iconCls: 'icon-LinkAdd',
text: 'Add Link',
margins: '5 5 0 5'
},
{
xtype: 'button',
height: 25,
id: 'resumeLinkDel',
itemId: 'resumeLinkDel',
iconCls: 'icon-LinkDelete',
text: 'Delete',
margins: '5 5 0 5'
},
{
xtype: 'button',
height: 25,
id: 'resumeLinkReload',
itemId: 'resumeLinkReload',
iconCls: 'icon-reload',
text: 'Refresh',
margins: '5 5 0 5'
},
{
xtype: 'button',
height: 25,
id: 'resumeLinkReset',
itemId: 'resumeLinkReset',
iconCls: 'icon-LinkReset',
text: '* Reset URL Details',
margins: '5 5 0 5'
}
]
}
],
viewConfig: {
emptyText: 'No Links have been registered...',
loadingText: 'Querying server for this profile\'s Links...'
},
columns: [
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'id',
text: 'Id',
format: 0
},
{
xtype: 'booleancolumn',
width: 45,
dataIndex: 'visible',
text: 'Visible'
},
{
xtype: 'gridcolumn',
width: 250,
dataIndex: 'linkName',
text: 'LinkName'
},
{
xtype: 'gridcolumn',
width: 250,
dataIndex: 'link',
text: 'Link'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'filePath',
text: 'FilePath'
}
]
}
]
},
{
xtype: 'gridpanel',
height: 150,
hidden: true,
id: 'resumeFilter',
itemId: 'resumeFilter',
collapsed: true,
title: 'Block Filters',
titleCollapse: true,
store: 'resumeFilter',
region: 'north',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'container',
html: '&nbsp;*&nbsp; Block filters are used to tag potential employers and prevent them from downloading your resumes.',
styleHtmlContent: true
}
]
},
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'resumefBlockKeyAdd',
itemId: 'resumefBlockKeyAdd',
width: 100,
iconCls: 'icon-keyAdd',
text: 'Add'
},
{
xtype: 'button',
id: 'resumefBlockKeyDel',
itemId: 'resumefBlockKeyDel',
width: 100,
iconCls: 'icon-keyDel',
text: 'Remove'
},
{
xtype: 'button',
id: 'resumefBlockKeyReload',
itemId: 'resumefBlockKeyReload',
width: 100,
iconCls: 'icon-reload',
text: 'Reload'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
id: 'resumefBlockKeySave',
itemId: 'resumefBlockKeySave',
iconCls: 'icon-disk',
text: 'Save Changes'
},
{
xtype: 'button',
id: 'resumefBlockKeyForget',
itemId: 'resumefBlockKeyForget',
iconCls: 'icon-trashcan',
text: 'Forget Changes'
}
]
}
],
viewConfig: {
emptyText: 'No filters defined...',
loadingText: 'Checking database for registered keywords',
multiSelect: true,
trackOver: true
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true
}),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {

})
],
columns: [
{
xtype: 'numbercolumn',
hidden: true,
width: 50,
dataIndex: 'id',
text: 'ID',
format: 0,
field: {
xtype: 'numberfield',
readOnly: true
}
},
{
xtype: 'gridcolumn',
dataIndex: 'keyword',
flex: 1,
text: 'Keyword',
field: {
xtype: 'textfield'
}
}
]
},
{
xtype: 'form',
height: 150,
html: 'Select a profile on the left to preview.',
id: 'resumeMain',
layout: {
type: 'fit'
},
bodyPadding: 10,
collapsed: false,
title: '< Preview >',
titleCollapse: true,
region: 'south'
}
]
}
]
},
{
xtype: 'panel',
id: 'resumeReqTAB',
layout: {
type: 'fit'
},
title: 'Requests',
dockedItems: [
{
xtype: 'toolbar',
width: 150,
region: 'west',
dock: 'top',
items: [
{
xtype: 'button',
id: 'resumeRequestorsReload',
itemId: 'resumeRequestorsReload',
iconCls: 'icon-reload',
text: 'Reload'
}
]
}
],
items: [
{
xtype: 'gridpanel',
id: 'resumeRequstorGrid',
store: 'resumeRequest',
region: 'center',
viewConfig: {
emptyText: 'No Requests for your resume(s) found...',
loadingText: 'Querying DB for Requestors'
},
columns: [
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'id',
text: 'Id',
format: 0
},
{
xtype: 'numbercolumn',
dataIndex: 'profileID',
text: 'Profile'
},
{
xtype: 'gridcolumn',
dataIndex: 'filename',
text: 'Filename'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Email'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'company',
text: 'Company'
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
text: 'Phone'
},
{
xtype: 'gridcolumn',
dataIndex: 'IP',
text: 'IP'
},
{
xtype: 'gridcolumn',
dataIndex: 'dTime',
text: 'DTime'
}
]
}
]
},
{
xtype: 'panel',
html: '//TODO: build search engine',
id: 'resumeSearchTAB',
layout: {
type: 'fit'
},
title: 'Search'
}
]
});

me.callParent(arguments);
}
});

In my add function, it shows the hidden accordian panels. The problem is they display with double (annoying) title bars. This is not desirable at all. Is this a bug? Or, am I missing something?

30810

Here's the code in all it's (buggy) glory:


Ext.define('RichieBartlett.controller.resumeTAB', {
extend: 'Ext.app.Controller',
stores: [
'resumeFiles',
'resumeFileType',
'resumeFilter',
'resumeLinks',
'resumeProfile',
'resumeRequest'
],
views:['resumeTAB'],
refs: [{
ref: 'RequestProfileTAB',
selector: 'panel[id=requestProfileTAB]'
}, {
ref: 'ResumeReqTAB',
selector: 'panel[id=resumeReqTAB]'
}, {
ref: 'ResumeSearchTAB',
selector: 'panel[id=resumeSearchTAB]'
}, {
ref: 'ResumeProfilesGrid',
selector: '#resumeProfilesGrid'
}, {
ref: 'ResumeForm',
selector: '#resumeForm'
}, {
ref: 'ResumeFiles',
selector: '#resumeFiles'
}, {
ref: 'ResumeLinks',
selector: '#resumeLinks'
}, {
ref: 'ResumeFilter',
selector: '#resumeFilter'
}, {
ref: 'ResumeMain',
selector: '#resumeMain'
}],

init:function(){
if(Ext.isGecko && debug) console.log(" resumeTAB.controllerInit()");
var me=this;
/*
me.application.on({//handle system-application wide events and calls here!!
'event': me.event,
'event2': me.event
});
*/
me.control({
'panel[itemId=resumeTAB]':{ //tabPanel object
afterrender: me.initResumeTAB,
containercontextmenu: me.cancelContextMenu
},
'panel[id=requestProfileTAB]':{ //tabPanel object
//afterrender: me.initResumeTAB,
containercontextmenu: me.cancelContextMenu
},
'panel[id=resumeReqTAB]':{ //tabPanel object
//afterrender: me.initResumeTAB,
containercontextmenu: me.cancelContextMenu
},
'panel[id=resumeSearchTAB]':{ //tabPanel object
//afterrender: me.initResumeTAB,
containercontextmenu: me.cancelContextMenu
},
'button[id=resumeProfilesAdd]':{ //toolbar button object
click: me.resumeProfileCreate
},
'button[id=resumeProfilesEdit]':{ //toolbar button object
click: me.resumeProfileEdit
},
'button[id=resumeProfilesDel]':{ //toolbar button object
click: me.resumeProfileDelete
},
'button[id=resumeProfilesReload]':{ //toolbar button object
click: me.resumeProfilesReload
},
'button[id=resumeProfSave]':{ //button object
click: me.resumeProfileSave
},
'[inputId=resumeSearchFilterI]':{ //trigger object
keyup: me.resumeSearchFilterKey
},
'button[id=resumeSearchFilter]':{ //button object
click: me.resumeSearchProfiles
},
'button[id=resumeSearchFilterClear]':{ //button object
click: me.resumeSearchClear
},
'button[id=resumeProfReset]':{ //button object
click: me.resumeProfileReset
},
'button[id=resumeProfileFileAdd]':{ //button object
click: me.resumeProfileFileAdd
},
'button[id=resumeProfileFileDel]':{ //button object
click: me.resumeProfileFileDel
},
'button[id=resumeProfileFileReload]':{ //button object
click: me.resumeProfileFileReload
},
'[id=resumeFiles]':{ //grid component
itemcontextmenu: me.cancelContextMenu,
containercontextmenu: me.cancelContextMenu
},
'[id=resumeLinkRadioFile]':{ // radio object
change: me.resumeRadioLinkFileOnClick
},
'[id=resumeLinkRadioURL]':{ // radio object
change: me.resumeRadioLinkFileOnClick
},
'button[id=resumeLinkSave]':{ //button object
click: me.resumeLinkSave
},
'button[id=resumeLinkDel]':{ //button object
click: me.resumeLinkDelete
},
'button[id=resumeLinkReset]':{ //button object
click: me.resumeLinkReset
},
'button[id=resumeLinkReload]':{ //button object
click: me.resumeLinkReload
},
'[id=resumeLinkGrid]':{ //grid component
itemcontextmenu: me.cancelContextMenu,
containercontextmenu: me.cancelContextMenu
},
'button[id=resumefBlockKeyAdd]':{ //button object
click: me.resumeFilterBlockKeyAdd
},
'button[id=resumefBlockKeyDel]':{ //button object
click: me.resumeFilterBlockKeyDel
},
'button[id=resumefBlockKeyReload]':{ //button object
click: me.resumefBlockKeyReload
},
'button[id=resumefBlockKeySave]':{ //button object
click: me.resumefBlockKeySave
},
'button[id=resumefBlockKeyForget]':{ //button object
click: me.resumefBlockKeyForget
},
'[id=resumeFilter]':{ //grid component
itemcontextmenu: me.cancelContextMenu,
containercontextmenu: me.cancelContextMenu
},
'[id=resumeProfilesGrid]':{ //grid component
containerclick: me.resumeProfileDeselect,
selectionchange: me.resumeProfileSelectChange,
itemcontextmenu: me.cancelContextMenu,
containercontextmenu: me.cancelContextMenu
},
'[id=resumeRequstorGrid]':{ //grid component
itemcontextmenu: me.cancelContextMenu,
containercontextmenu: me.cancelContextMenu
}
});

},
profileID:0, // easy place to store current selected profile.id; new = 0;
linkID:0, // easy place to store current link.id; new = 0;
filterID:0, // easy place to store current filter.id; new = 0;
initResumeTAB: function () {
var me=this;
if(Ext.isGecko && debug) console.log(" resumeTAB.controller.appRendered()");
/*
me.getResumeForm().hide();
me.getResumeFiles().hide();
me.getResumeLinks().hide();
me.getResumeFilter().hide();
*/
me.resumeProfilesReload();
me.getResumeMain().expand();
},
resumeProfileDeselect: function ( thisGrid, e, eListener ) {
try {
thisGrid.getSelectionModel().select(-1); //clear all selections;
} catch (e) {}
},
resumeProfileSelectChange: function ( modelRecord, modelRecordSelected, eListener ) {
var me=this;
var grid = me.getResumeProfilesGrid();
if (Ext.isGecko && debug) {
console.log(" resumeProfileSelectChange(" + modelRecordSelected.length + ")");
//console.dir(this);
}
if ( modelRecordSelected.length < 1 ) { //nothing selected!
grid.down('#resumeProfilesDel').disable();
me.profileID= -1;
me.resumeProfileCreate();
} else {
if ( modelRecordSelected.length === 1 ) { //nothing selected!
grid.down('#resumeProfilesDel').enable();
me.resumeProfileEdit();
}//end if 1 row selected
}//end if select count
},
resumeProfileCreate: function () {
if (Ext.isGecko && debug) {
console.log(" resumeProfileCreate()");
//console.dir(this);
}
var me=this;
me.profileID=0;
me.linkID=0;
me.filterID=0;
//clear the forms:
me.resumeLinkReset();
me.resumeProfileReset();
//clear the gridStores:
me.getResumeFilesStore().removeAll();
me.getResumeLinksStore().removeAll();
me.getResumeFilterStore().removeAll();
//show the first form to setup the Profile
me.getResumeForm().show();
me.getResumeForm().expand();
/*
if (me.getResumeForm().collapsed) {
}
*/
me.getResumeForm().down("#resumeProfileName").setValue("");
me.getResumeForm().down("#resumeProfileDescript").setValue("");
me.getResumeForm().down("#resumeProfileVisible").setValue("");
me.getResumeForm().down("#resumeProfileID").setValue(0);

me.getResumeForm().down("#resumeProfileName").resetOriginalValue();
me.getResumeForm().down("#resumeProfileDescript").resetOriginalValue();
me.getResumeForm().down("#resumeProfileVisible").resetOriginalValue();
me.getResumeForm().down("#resumeProfileID").resetOriginalValue();

me.getResumeForm().down("#resumeProfSave").setText("Save");
me.getResumeForm().down("[id=resumeProfileName]").selectText();
//hide the other panels until the new profile is created
me.getResumeFiles().hide();
me.getResumeLinks().hide();
me.getResumeFilter().hide();
me.getResumeMain().hide();
},
resumeProfileEdit: function () {
var me=this;
var profileForm = me.getResumeForm();
var grid = me.getResumeProfilesGrid();
var gridRecord = grid.getSelectionModel().getSelection()[0];
if (Ext.isGecko && debug) {
console.log(" resumeProfileEdit({id:" + gridRecord.getId() + "})");
//console.dir(this);
}
if (me.profileID != gridRecord.getId()) {
me.profileID = gridRecord.getId();
me.getResumeFiles().show();
me.getResumeLinks().show();
me.getResumeFilter().show();
me.getResumeForm().show();
//populate the Profile form

profileForm.down("#resumeProfileName").setValue(gridRecord.get("name"));
profileForm.down("#resumeProfileDescript").setValue(gridRecord.get("summary"));
profileForm.down("#resumeProfileVisible").setValue(gridRecord.get("visible"));
profileForm.down("#resumeProfileID").setValue(me.profileID);
profileForm.down("#resumeProfileName").resetOriginalValue();
profileForm.down("#resumeProfileDescript").resetOriginalValue();
profileForm.down("#resumeProfileVisible").resetOriginalValue();
profileForm.down("#resumeProfileID").resetOriginalValue();
profileForm.down("#resumeProfSave").setText("Update");
//load the grids
/*
this.getResumeFilesStore().load();
this.getResumeLinksStore().load();
this.getResumeFilterStore().load();
*/
//update the Preview!
me.getResumeMain().show();
me.getResumeMain().expand();
}//end if different ID selected

},
resumeSearchFilterKey: function(txtCmp, e, eListener){
if (Ext.isGecko && debug) {
console.log(" resumeSearchFilterKey()");
//console.dir(this);
}
var me=this;
e.stopEvent();
switch (e.getKey()){
case e.ENTER:
me.resumeSearchProfiles();
break;
case e.DELETE, e.ESC: //e.BACKSPACE,
me.resumeSearchClear();
break;
}//end switch e

},
resumeSearchProfiles: function () {
if (Ext.isGecko && debug) {
console.log(" resumeSearchProfiles()");
//console.dir(this);
}
var grid = this.getResumeProfilesGrid();
var searchTxt = grid.down("#resumeSearchFilter").getValue();
if (searchTxt.length> 1) {
var gridStore = grid.getStore();
var searchFilter = new Ext.util.Filter({
filterFn: function(item){
var searchtest = new RegExp(Ext.String.escapeRegex(searchTxt), 'i');
return (searchtest.test(item.data.name) || searchtest.test(item.data.summary) || searchtest.test(item.data.created));
}
});
gridStore.clearFilter();
gridStore.filter([searchFilter]);
}

},
resumeSearchClear: function () {
if (Ext.isGecko && debug) {
console.log(" resumeSearchClear()");
//console.dir(this);
}
var grid = this.getResumeProfilesGrid();
grid.down("#resumeSearchFilter").setValue("");
grid.getStore().clearFilter();

},
resumeProfilesReload: function () {
this.getResumeProfileStore().load();
},
resumeProfileDelete: function () {
if (Ext.isGecko && debug) {
console.log(" resumeProfileDelete()");
//console.dir(this);
}
},
resumeProfileSave: function () {
if (Ext.isGecko && debug) {
console.log(" resumeProfileSave()");
//console.dir(this);
}
var grid = this.getResumeProfilesGrid();
var profileForm = this.getResumeForm();
if (profileForm.getForm().isValid()) { //TODO: submit form and get new DB id.
var dTime= new Date();

var newRecord= Ext.create('RichieBartlett.model.resumeProfile',{
newRecordId : Ext.id(),
id: this.profileID++,
name: profileForm.down("#resumeProfileName").getValue(),
summary: profileForm.down("#resumeProfileDescript").getValue(),
visible : profileForm.down("#resumeProfileVisible").getValue(),
created: Ext.util.Format.date(dTime,"Y/m/d G:i:s")

});

grid.getStore().insert(0, newRecord );
} else {
Alert("Resume Manager","Please check a keyword to delete...");
}//end if valid form

},
resumeProfileReset: function () {
if (Ext.isGecko && debug) {
console.log(" resumeProfileReset()");
}
var thisForm = this.getResumeForm();
thisForm.down("[id=resumeProfileName]").reset();
thisForm.down("[id=resumeProfileVisible]").reset();
thisForm.down("[id=resumeProfileDescript]").reset();
thisForm.down("[id=resumeProfileID]").setValue(this.profileID);
try {
thisForm.down("[id=resumeProfileName]").selectText();
} catch (e) {}

},
resumeProfileFileAdd: function () {
if (Ext.isGecko && debug) {
console.log(" resumeProfileFileAdd()");
//console.dir(this);
}
var me=this;
var uploader;
var grid = this.getResumeFiles();
me.application.fireEvent('adminlogevent', "resumeProfileFileAdd()");
grid.el.mask("Resume Manager<BR> Loading Upload tool", 'x-mask-loading');
uploader = Ext.create('RichieBartlett.view.fileUploader', {renderTo: Ext.getBody()});
//winManager.handleID++;
//winManager.currentFocus=winManager.handleID;
uploader.on('show', function () {
Ext.getCmp("fileProgress").reset();
Ext.getCmp("fileSubmit").enable();
Ext.getCmp("fileProgress").hide();
grid.el.unmask();
uploader.center();
});
uploader.show();
},
resumeProfileFileDel: function () {
if (Ext.isGecko && debug) {
console.log(" resumeProfileFileDel()");
//console.dir(this);
}

},
resumeProfileFileReload: function () {
this.getResumeFilesStore().load();
},
resumeRadioLinkFileOnClick: function () {
var thisForm = this.getResumeLinks();
if(thisForm.down("#resumeLinkRadioFile").getValue()){
thisForm.down("#resumeLinkURL").disable();
thisForm.down("#resumeLinkLocal").enable();
thisForm.down("#resumeLinkURL").setValue("");
}else{
thisForm.down("#resumeLinkLocal").disable();
thisForm.down("#resumeLinkURL").enable();
thisForm.down("#resumeLinkURL").setValue("http://");
try {
thisForm.down("#resumeLinkURL").selectText();
} catch (e) {}
}

},
resumeLinkSave: function () {
if (Ext.isGecko && debug) {
console.log(" resumeLinkSave()");
//console.dir(this);
}

},
resumeLinkDelete: function () {
if (Ext.isGecko && debug) {
console.log(" resumeLinkReset()");
//console.dir(this);
}

},
resumeLinkReset: function () {
if (Ext.isGecko && debug) {
console.log(" resumeLinkReset()");
//console.dir(this);
}
var me=this;
var thisForm = this.getResumeLinks();
thisForm.down("[id=resumeLinkName]").setValue("");
thisForm.down("[id=resumeLinkShow]").setValue(false);
thisForm.down("[id=resumeLinkDescript]").setValue("");
thisForm.down("[id=resumeLinkID]").setValue(this.linkID);
thisForm.down("[id=resumeLinkLocal]").setValue("");
thisForm.down("[id=resumeLinkURL]").setValue("");
thisForm.down("[id=resumeLinkURLaddress]").setValue("");
thisForm.down("[id=resumeLinkImg]").collapse();
thisForm.down("[id=resumeLinkProgress]").reset();
thisForm.down("[id=resumeLinkProgress]").hide();
try {
thisForm.down("[id=resumeLinkName]").selectText();
} catch (e) {}
},
resumeLinkReload: function () {
this.getResumeLinksStore().load();
},
resumeFilterBlockKeyAdd: function () {
if (Ext.isGecko && debug) {
console.log(" resumeFilterBlockKeyAdd()");
//console.dir(this);
}
var grid = this.getResumeFilter();

grid.editingPlugin.cancelEdit();

var newRecord= Ext.create('RichieBartlett.model.resumeFilter',{
newRecordId : Ext.id(),
keyword: "",
profileID: this.profileID
});

grid.getStore().insert(0, newRecord );
grid.editingPlugin.startEditByPosition({row: 0, column: 2});

},
resumeFilterBlockKeyDel: function () {
//var grid= Ext.getCmp("resumeFilter");
var grid= this.getResumeFilter();
var gridCnt= grid.getSelectionModel().getCount();
if (Ext.isGecko && debug) {
console.log(" resumeFilterBlockKeyDel( " + gridCnt + " )");
//console.dir(this);
}
if ( gridCnt > 0 ) {
for (i=0; i<gridCnt; i++) {
var recordToDelete = grid.store.getAt( grid.getSelectionModel().getSelection()[i] );
this.getResumeFilterStore().remove( recordToDelete ); //now, remove deleted row...
}//end for i
} else {
Alert("Resume Manager","Please check a keyword to delete...");
}//end if no selection
},
resumefBlockKeyReload: function () {
//Ext.StoreMgr.lookup("resumeFilter").load();
this.getResumeFilterStore().load();
},
resumefBlockKeySave: function () {
if (Ext.isGecko && debug) {
console.log(" resumefBlockKeySave()");
//console.dir(this);
}
//Ext.StoreMgr.lookup("resumeFilter").commitChanges();
this.getResumeFilterStore().commitChanges();
},
resumefBlockKeyForget: function () {
if (Ext.isGecko && debug) {
console.log(" resumefBlockKeyForget()");
//console.dir(this);
}
//Ext.StoreMgr.lookup("resumeFilter").rejectChanges();
this.getResumeFilterStore().rejectChanges();
},
cancelContextMenu: function (objContainer, e, eOpts) {
if (e && typeof(e)=="object" && e.preventDefault) {
e.preventDefault();
} else {
Ext.EventObject.stopEvent(e);
}//end if e (mouse/key)
}



});

My next issue is the grid rows layout. For some strange reason the CSS shows the border-spacing set to '2px' ... [captured via fireBug]

.x-html table {
border-spacing: 2px;


}



30811


Can anyone recommend advice to resolve my current issues?

lorezyra
18 Jan 2012, 7:04 PM
The accordian layout seems very buggy if you config "hidden: true"...
When I programmatically show the hidden panels, they appear with the extra title bar. However, If I don't hide them, then the accordian behaves as expected.


Seems like the accordian doesn't like to have hidden components (panels). Can someone verify this is a bug??

lorezyra
19 Jan 2012, 12:59 PM
Any advice?

lorezyra
21 Jan 2012, 6:50 AM
Can anyone explain why the grid is displaying the rows with a 2px border-spacing?