PDA

View Full Version : Toolbar and Combobox



nak1
31 Jul 2009, 7:41 AM
We recently upgraded to Ext 3.0 and I've experienced some issues with various widgets. I've got a Ext.Toolbar component that had a combobox which is now rendering off the toolbar. I've tried placing the combobox in various parts of the toolbar, but it always renders improperly. I don't know what it's doing that, but any assistance would be useful. Here is the code for creating the toolbar:



portal.taskToolbar = new Ext.Toolbar({
width: 1000,
items: [{
xtype: 'tbtext',
text: 'Test'
}, {xtype: 'tbspacer', width: 320},
{xtype: 'tbspacer', width: 10},
{
xtype:'button',
id: 'btnAddPunchList',
text: 'Punchlist',
icon: '/images/icons/silk/text_list_bullets.png',
listeners: {
click: function(){
console.log(portal.dsTask);
var temp = new Ext.Window({
title:'<b>Dynamic Punchlist</b>',
width:750,
height:500,
modal:true,
items:[
{ xtype:'panel',
layout:'auto',
autoScroll:true,
tbar:[ {
xtype:'button',
text: 'Print',
icon: '/images/icons/silk/printer.png'
}],
items:[{
xtype:'dataview',
bodyStyle: 'border: 0',
autoScroll:true,
//width:1000,
height:440,
store: portal.dsTask,
loadingText: 'Loading Tasks...',
tpl: template.projectDataRowPunchListDemo,
multiSelect: false,
overCls: 'thumb-wrap-over',
style:'cursor:default',
selectedClass: 'thumb-selected',
itemSelector: 'div.thumb-wrap',
emptyText: 'No Tasks Found'
}]
}]
})
temp.show();
}
}
},
{
xtype:'button',
id: 'btnAddTask',
text: 'Add Task',
iconCls: 'add-icon',
listeners: {
render: function(f){
f.on('click', function(){
//SET THE STATE OF THIS TASK TO EDIT
portal.setTaskAdd()
//this.publish('addTask', {projectid:0,'parentid': portal.ctrlProject.phaseid})
});
}
}
}]
});
portal.taskToolbar.on('afterrender', function(){
var filter = new Ext.Button({
xtype: 'button',
id: 'btnTaskFilter',
cls: 'x-btn-text-icon',
icon: '/images/icons/silk/filter.png',
text: 'Filter',
listeners: {
click: function(){
var temp = new Ext.Window({
title: 'Task Filter',
layout: 'table',
layoutConfig: {
columns: 1
},
width: 700,
height: 125,
items: [{
html: 'General',
colspan: 7,
layout: 'table',
layoutConfig: {
columns: 7
},
items: [{
xtype: 'checkbox',
width: 65,
labelStyle: 'margin: 4px;',
boxLabel: 'New',
inputValue: 'new',
checked: true,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'status');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 65,
labelStyle: 'margin: 4px;',
boxLabel: 'Active',
inputValue: 'active',
checked: true,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'status');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 90,
labelStyle: 'margin: 4px;',
boxLabel: 'Approved',
inputValue: 'approved',
checked: false,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'approved');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Denied',
inputValue: 'denied',
checked: false,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'denied');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Completed',
inputValue: 'completed',
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'completed');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Cancelled',
inputValue: 'deactivated',
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'status');
},
scope: this
}
}, {
html: ''
}]
}, {
html: 'Filter by stages',
colspan: 7,
layout: 'table',
layoutConfig: {
columns: 7
},
items: [{
xtype: 'checkbox',
width: 80,
labelStyle: 'margin: 4px;',
boxLabel: 'Creation',
inputValue: 'creation',
checked: false,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 80,
labelStyle: 'margin: 4px;',
boxLabel: 'Proposal',
inputValue: 'proposal',
checked: false,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Agreed Upon',
inputValue: 'commencement',
checked: false,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 80,
labelStyle: 'margin: 4px;',
boxLabel: 'Execution',
inputValue: 'execution',
checked: false,
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Completion',
inputValue: 'completion',
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Billing',
inputValue: 'billing',
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}, {
xtype: 'checkbox',
width: 100,
labelStyle: 'margin: 4px;',
boxLabel: 'Closed',
inputValue: 'closed',
listeners: {
check: function(checkbox, isChecked){
portal.setTaskFilter(checkbox, isChecked, 'stage');
},
scope: this
}
}]
}]
})
temp.show();
},
scope: this
}
})


var combobox = new Ext.form.ComboBox({
fieldLabel: 'Go to:',
id: 'btTaskDropCombo',
store: portal.dsTask,
displayField: 'display_name',
valueField: 'projectid',
mode: 'local',
minListWidth: 400,
typeAhead: false,
//editable: true,
allowBlank: true,
forceSelection: true,
tpl: template.comboTask,
width: 100,
listeners: {

render: function(f){
f.on({
'select': {
fn: function(){
var dv = Ext.getCmp('dvTask');
var index = Ext.getCmp('btTaskDropCombo').selectedIndex
//THERE WAS AN ISSUE WITH CLEARING THE DATAVIEW SELECTIONS
dv.selected.elements = []
// MARK RECORD AS SELECTED
/********************************************************************
var dsSelected = dv.getNodes();

for (var i = 0; i < dsSelected.length; i++) {
dv.deselect(dsSelected[i]);

}
*********************************************************************/
dv.select(index, false);
dv.getSelectedRecords()[0].data.state = 'view'
// UPDATE CONTROLLER OBJECT
portal.ctrlProject.setProject({
taskid: dv.getSelectedRecords()[0].data.projectid
});

portal.setTaskPrevNextBtn();
}
},
'collapse': {
fn: function(){
this.setValue('')
}
}
})
}
}
})
/*
var taskadd = new Ext.Button({
id: 'btnAddTask',
text: 'Add Task',
iconCls: 'add-icon',
listeners: {
render: function(f){
f.on('click', function(){
//SET THE STATE OF THIS TASK TO EDIT
portal.setTaskAdd()
//this.publish('addTask', {projectid:0,'parentid': portal.ctrlProject.phaseid})
});
}
}
})
*/
var tasklist = new Ext.Button({
id: 'btnTaskUp',
text: 'Task List',
iconCls: 'up-icon',
listeners: {
render: function(f){
f.on('click', function(){
portal.setTaskRowView()
// HIDE TASK NAVIGATION BUTTONS
//portal.setTaskToolBarGeneral(record)
/********************************************************************
portal.taskToolbar.items.itemAt(9).hide();
portal.taskToolbar.items.itemAt(11).hide();
Ext.getCmp('btnTaskUp').hide();
Ext.getCmp('btnTaskBack').hide();
Ext.getCmp('btnTaskForward').hide();

// SHOW TASK FILTER CHECKBOXES
Ext.getCmp('taskCheck1').show();
Ext.getCmp('taskCheck2').show();
Ext.getCmp('taskCheck3').show();
Ext.getCmp('taskCheck4').show();
*********************************************************************/
}, portal);
}
}
})

//portal.taskToolbar.add(taskadd);
portal.taskToolbar.add(portal.addTaskButton);
portal.taskToolbar.add(new Ext.Toolbar.Spacer({xtype: 'tbspacer', width: 15}));
portal.taskToolbar.add(tasklist);
portal.taskToolbar.add( new Ext.Toolbar.Button({
text: 'Mgt View',
cls: 'x-btn-text-icon',
icon: '/images/icons/silk/text_align_left.png',
id: 'btnTaskManagement',
tooltip:'View the management view',
handler: function(){
global.xtemplate.setView('fin');
Ext.getCmp('dvTask').refresh();
}
})
);
portal.taskToolbar.add( new Ext.Toolbar.Button({
text: 'Operation',
cls: 'x-btn-text-icon',
icon: '/images/icons/silk/magnifier.png',
id: 'btnTaskOperation',
tooltip:'View the operational view',
handler: function(){
global.xtemplate.setView('op');
Ext.getCmp('dvTask').refresh();
}
})
);

portal.taskToolbar.add(filter);
portal.taskToolbar.add(combobox);
portal.taskToolbar.add(new Ext.Toolbar.Spacer({xtype: 'tbspacer', width: 15}));
//portal.taskToolbar.doLayout();
})
}

mjlecomte
2 Aug 2009, 1:03 PM
That's a lot of code to look at for free. Suggest you trim it down to something simple.

Toolbar changed to a Container in Ext 3.

nak1
4 Aug 2009, 2:56 PM
I fixed the issue. Just took a little elbow grease. I ended up adjusting the spacing using the '->'