Code:
var subLayout = function(){
var ds;
var grid;
var colModel;
var gridFoot;
var paging;
var layout;
var previewPane;
var queryText;
var tb;
var lciType = [
['1', 'Lead'],
['2', 'Complaint'],
['3', 'Inquiry']
];
var sType = [
['1', 'Any Type'],
['2', 'Leads only'],
['3', 'Complaints only'],
['4', 'Inquiries only']
];
var sStatus = [
['1', 'Any Status'],
['2', 'Any Open Status'],
['3', 'Any Closed Status'],
['4', 'Open only'],
['5', 'Open - Escalated only'],
['6', 'Closed only'],
['7', 'Closed - Sale Made only'],
['8', 'Closed - Lost Sale only'],
['9', 'Closed - Referred only']
];
function setupDataSource(query) {
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'sqlget2.php?'+query, method:'GET'}),
reader: new Ext.data.JsonReader({root: 'results', totalProperty: 'total', id: 'ID' },
[
{name: 'id', mapping: 'ID', type: 'int'},
{name: 'full_name', mapping: 'FullName'},
{name: 'category', mapping: 'Category'},
{name: 'status', mapping: 'Status'},
{name: 'type', mapping: 'InquityType'},
{name: 'facility', mapping: 'Facility'},
{name: 'time_entered', mapping: 'Time_Entered', type: 'date', dateFormat: 'm-d-Y'},
{name: 'edited', mapping: 'Edited', type: 'date', dateFormat: 'm-d-Y'},
{name: 'hours', mapping: 'Hours'},
{name: 'actions', mapping: 'Actions'},
{name: 'needs_view', mapping: 'Needs_View'}
])
// , remoteSort: true
});
ds.setDefaultSort('id', 'desc');
ds.load({params:{start:0, limit:50}});
}
function getColumnModel() {
colModel = new Ext.grid.ColumnModel([
{header: "Unique ID", width:70, dataIndex: 'id'},
{id: 'slicName',header: "Name", width:150, dataIndex: 'full_name'},
{id: 'slicCat', header: "Category", width:190, dataIndex: 'category'},
{header: "Status", width:100, dataIndex: 'status'},
{header: "Type", width:70, dataIndex: 'type'},
{header: "CSC Name", width:170, dataIndex: 'facility'},
{header: "Entered", width:65, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'time_entered'},
{header: "Updated", width:65, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'edited'}
]);
colModel.defaultSortable = true;
return colModel;
}
function rowClicked(grid, rowClicked, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();
var south = layout.getRegion('south');
south.expand();
previewPanel.load({url: 'sqlget2.php?start=0&limit=50&ID='+record.data['id']});
}
function buildGrid() {
grid = new Ext.grid.Grid('mygrid',
{
ds: ds,
colModel: getColumnModel(),
selModel: new Ext.grid.RowSelectionModel(),
enableColLock:false,
enableColumnMove: false,
monitorWindowResize : true
}
);
grid.addListener("rowclick", rowClicked);
grid.render();
gridFoot = grid.getView().getFooterPanel(true);
paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 50,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
});
}
function buildtb() {
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [
{ text: 'Send to New CSC',
handler: clickHandler
},
{ text: 'Assign to New CSR',
handler: clickHandler
},
{ text: 'Send to a Stratic Partner',
handler: clickHandler
}
]
});
var tb = new Ext.Toolbar('toolbar');
tb.add({
cls: 'x-btn-text-icon bmenu', // icon and text class
text:'Reassign',
menu: menu // assign menu by instance
}, '-'
);
tb.addButton({
text:'Inquiry Actions',
handler: clickHandler
});
}
function onItemToggle(item, pressed){
alert('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
}
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}
return {
init : function() {
setupDataSource();
buildGrid();
buildtb();
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 27,
titlebar: false
},
west: {
split:false,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 310,
minSize: 175,
maxSize: 310,
titlebar: true,
collapsible: true,
animate: true,
floatable: false
},
south: {
split:true,
initialSize: 300,
minSize: 100,
maxSize: 300,
titlebar: true,
collapsible: true,
collapsed: true,
animate: true,
floatable: false,
collapsedTitle: 'Detailed View'
},
center: {
split:false,
titlebar: false,
alwaysShowTabs: true,
tabPosition:'top'
}
}); //end layout
previewPanel = new Ext.ContentPanel('south', {title: 'Record Details', closable: false});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', previewPanel);
layout.add('west', new Ext.ContentPanel('west', {title: 'Help'}));
layout.add('east', new Ext.ContentPanel('east', {title: 'Search Criteria', closable: false}));
layout.add('center', new Ext.GridPanel (grid, {title: 'Suburban Propane', closable: false}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Strategic Partners', closable: false}));
layout.getRegion('west').hide();
layout.getRegion('center').showPanel('mygrid');
layout.endUpdate();
var searchFrm = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 75
});
searchFrm.fieldset(
{legend:'Location Information'},
new Ext.form.ComboBox({
fieldLabel: 'Region',
hiddenName:'sRegion',
store: new Ext.data.Store({
baseParams: {
comboQry: 'SELECT ID, Number FROM Regions ORDER BY Number'
},
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'combo.php'
}),
reader: new Ext.data.JsonReader(
{
root: 'results'
},
[
{name:'regID', mapping:'ID'},
{name:'regNum', mapping:'Number'}
]
)
}
),
displayField:'regNum',
typeAhead: false,
mode: 'remote',
triggerAction: 'all',
emptyText:'Select a Region...',
selectOnFocus:true,
width:175
}),
new Ext.form.ComboBox({
fieldLabel: 'CSC',
hiddenName:'sCSC',
store: new Ext.data.Store({
baseParams: {
comboQry: 'SELECT ID, Name FROM CSC ORDER BY Name'
},
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'combo.php'
}),
reader: new Ext.data.JsonReader(
{
root: 'results'
},
[
{name:'cscID', mapping:'ID'},
{name:'cscName', mapping:'Name'}
]
)
}
),
displayField:'cscName',
typeAhead: false,
mode: 'remote',
listWidth:225,
triggerAction: 'all',
emptyText:'Select a CSC...',
selectOnFocus:true,
width:175
}),
new Ext.form.ComboBox({
fieldLabel: 'CSR Name',
hiddenName:'sCSR',
store: new Ext.data.Store({
baseParams: {
comboQry: 'SELECT UserName, CONCAT(LastName, \', \', FirstName) AS \'FullName\' FROM Reps ORDER BY \'FullName\''
},
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'combo.php'
}),
reader: new Ext.data.JsonReader(
{
root: 'results'
},
[
{name:'repUsr', mapping:'UserName'},
{name:'repName', mapping:'FullName'}
]
)
}
),
displayField:'repName',
typeAhead: false,
mode: 'remote',
triggerAction: 'all',
emptyText:'Select a CSR...',
selectOnFocus:true,
width:175
})
);
searchFrm.fieldset(
{legend:'Inquiry Information'},
new Ext.form.TextField({
fieldLabel: 'ID',
name: 'SearchID',
width:175
}),
new Ext.form.ComboBox({
fieldLabel: 'Inquiry Type',
hiddenName:'sType',
store: new Ext.data.SimpleStore({
fields: ['id', 'type'],
data : sType
}),
displayField:'type',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Type...',
selectOnFocus:true,
width:175
}),
new Ext.form.ComboBox({
fieldLabel: 'Status',
hiddenName:'sStatus',
store: new Ext.data.SimpleStore({
fields: ['id', 'status'],
data : sStatus
}),
displayField:'status',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Status...',
selectOnFocus:true,
width:175
}),
new Ext.form.DateField({
fieldLabel: 'After this Date',
name: 'sDateAfter',
width:175,
allowBlank:false
}),
new Ext.form.DateField({
fieldLabel: 'Before this Date',
name: 'sDateBefore',
width:175,
allowBlank:false
})
);
searchFrm.fieldset(
{legend:'Customer Information'},
new Ext.form.TextField({
fieldLabel: 'Customer Name',
name: 'sCName',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Account #',
name: 'sAccount',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Address',
name: 'sAddress',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Zip',
name: 'sZip',
width:175
}),
new Ext.form.TextField({
fieldLabel: 'Phone',
name: 'sPhone',
width:175
})
);
searchFrm.addButton('Search').on('click', function(){
//Ext.MessageBox.alert('Success', 'You have filled out the form correctly.');
queryText = 'SearchID=' + searchFrm.findField('SearchID').getValue();
/* Collapse Search Panel After first search
var east = layout.getRegion('east');
if(east.isVisible()){
east.collapse();
}
*/
setupDataSource(queryText);
buildGrid();
});
searchFrm.addButton('Cancel');
searchFrm.render('form-ct');
/*
* ================ Edit Form =======================
*/
var editFrm = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 60
});
editFrm.column({width:225}); // open column, without auto close
editFrm.fieldset(
{legend:'Customer Details'},
new Ext.form.TextField({
fieldLabel: 'ID #',
name: 'idNum'
}),
new Ext.form.TextField({
fieldLabel: 'Frist Name',
name: 'firstName'
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'lastName'
}),
new Ext.form.TextField({
fieldLabel: 'Account #',
name: 'accountNum'
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email'
}),
new Ext.form.ComboBox({
fieldLabel: 'Usage Type',
hiddenName:'usagetype',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
}),
displayField:'abbr',
typeAhead: true,
maxHeight: 50,
mode: 'local',
triggerAction: 'all',
emptyText:'state...',
selectOnFocus:true
})
);
editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
editFrm.column({width:225, style:'margin-left:10px'});
editFrm.fieldset(
{legend:'Address Info'});
editFrm.add (
new Ext.form.TextField({
fieldLabel: 'Address 1',
name: 'address1'
}),
new Ext.form.TextField({
fieldLabel: 'Address 2',
name: 'address2'
}),
new Ext.form.TextField({
fieldLabel: 'City',
name: 'city'
}),
new Ext.form.TextField({
fieldLabel: 'Phone #',
name: 'phone'
}),
new Ext.form.TextField({
fieldLabel: 'Alt. Phone #',
name: 'altPhone'
})
);
editFrm.container( { width:215 });
editFrm.column( {width:120 },
new Ext.form.ComboBox({
fieldLabel: 'State',
hiddenName:'state',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
}),
displayField:'abbr',
typeAhead: true,
maxHeight: 150,
mode: 'local',
triggerAction: 'all',
emptyText:'ST...',
selectOnFocus:true,
labelWidth: 75,
width:40
})
);
editFrm.column( {width:80, labelWidth:15 },
new Ext.form.TextField({
fieldLabel: 'Zip',
name: 'zip',
width:50
})
);
editFrm.end(); //close container
editFrm.end(); // closes column
editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
editFrm.column({width:225, style:'margin-left:10px'});
editFrm.fieldset(
{legend:'Inquiry Details'},
new Ext.form.ComboBox({
fieldLabel: 'Type',
hiddenName:'lciType',
store: new Ext.data.SimpleStore({
fields: ['id', 'type'],
data : lciType
}),
displayField:'type',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a type...',
selectOnFocus:true
}),
new Ext.form.ComboBox({
fieldLabel: 'Source',
hiddenName:'sType',
store: new Ext.data.SimpleStore({
fields: ['id', 'type'],
data : sType
}),
displayField:'type',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a source...',
selectOnFocus:true
}),
new Ext.form.ComboBox({
fieldLabel: 'Status',
hiddenName:'sStatus',
store: new Ext.data.SimpleStore({
fields: ['id', 'status'],
data : sStatus
}),
displayField:'status',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a status...',
selectOnFocus:true
}),
new Ext.form.DateField({
fieldLabel: 'Come-up',
name: 'comeUpDate',
allowBlank:true
})
);
editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
editFrm.column({width:280, style:'margin-left:10px', labelAlign: 'top', clear:true});
editFrm.fieldset(
{legend:'Comments'},
new Ext.form.TextArea({
fieldLabel: 'Comments',
name: 'comments',
grow: false,
width: 255,
height: 135,
value: 'Detailed comments'
})
/*, new Ext.form.TextArea({
fieldLabel: 'New Action',
name: 'action',
grow: false,
width: 255,
preventScrollbars:false
})*/
);
editFrm.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
editFrm.applyIfToFields({
width:125
});
editFrm.addButton('Save');
editFrm.addButton('Cancel');
editFrm.render('form-ct4');
}, // END init
getDataSource: function() {
return ds;
}
, toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show Help';
}else{
west.show();
link.innerHTML = 'Hide Help';
}
} // end toggleWest
, expandSouth : function(link){
var south = layout.getRegion('south');
south.resizeTo(350);
south.expand();
} // end expandSouth
, collapseSouth : function(link){
var south = layout.getRegion('south');
south.resizeTo(150);
south.collapse();
} //end collapseSouth
} // END return
}(); // END sublayout
Ext.EventManager.onDocumentReady(subLayout.init, subLayout, true);
grid.getView.refresh()
Reply With Quote