Code:
/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
//
// This is the main layout definition.
//
Ext.onReady(function(){
Ext.QuickTips.init();
var map = {
xtype: 'tabpanel',
plain: true, //remove the header border
activeTab: 0,
defaults: {
xtype: 'gmappanel',
zoomLevel: 6,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl']
},
items: [{
title: 'Map Locator',
id: 'my_map',
setCenter: {
lat: -4.039618,
lng: 110.786133
},
// i don't know how to get location from database :(
markers: [
{
lat: [{dataIndex: 'lat'}],
lng: [{dataIndex: 'long'}],
marker: [{title: {dataIndex: 'client'}}]
}
],
buttons: [{
text: 'Hide Markers',
handler: function(){
Ext.getCmp('my_map').hideMarkers();
}
},{
text: 'Show Markers',
handler: function(){
Ext.getCmp('my_map').showMarkers();
}
}]
},{
title: 'Help',
html :'Just Help Page...'
}]
};
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: map,
};
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var url = {
//local: 'grid-filter.json', // static data file
local: 'php/filter.php'
};
var local = true;
store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: (local ? url.local : url.remote),
remoteSort: false,
sortInfo: {
field: 'client',
direction: 'ASC'
},
storeId: 'myStore',
// reader configs
idProperty: 'id',
root: 'results',
totalProperty: 'total',
fields: [{
name: 'id'
}, {
name: 'client'
}, {
name: 'lat',
},{
name: 'long',
},{
name: 'alamat',
},{
name: 'kab_kota',
},{
name: 'provinsi',
},{
name: 'pic',
},{
name: 'status',
},{
name: 'serial_number',
}]
});
// create the Grid
var clientPanel = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Client',
width : 160,
sortable : true,
dataIndex: 'client'
},
{
header : 'Status',
width : 75,
sortable : true,
dataIndex: 'status'
}
],
bbar: new Ext.PagingToolbar
({
pageSize: 20,
store: store,
displayInfo: true,
items:[ {
xtype: 'button',
pressed: false,
enableToggle:false,
text: 'Search',
//cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
}),
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Client Lists',
loadMask: true,
region:'north',
split: true,
minSize: 150,
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
store.load({params:{start:0, limit:20}});
var bookTplMarkup = [
'<p class="details-info">',
'Clients : {client}<br/>',
'Lat / Long : {lat} / {long}<br/>',
'Alamat : {alamat}<br/>',
'Kab / Kota : {kab_kota}<br/>',
'Provinsi : {provinsi}<br/>',
'PIC : {pic}<br/>',
'Serial Modem : {serial_number}<br/>',
'</p>'
];
var bookTpl = new Ext.Template(bookTplMarkup);
var detailsPanel = {
id: 'details-panel',
title: 'Information',
region: 'center',
bodyStyle: 'padding-bottom:15px;background:#fff;',
autoScroll: true,
html: '<p class="details-info">When you select a layout from the grid, additional details will display here.</p>'
}
// i don't know the code on.rowselect bind to detailspanel & set center to map :(
clientPanel.getSelectionModel().on('rowselect', function(SelectionModel, rowIndex, r) {
var detailPanel = Ext.getCmp('details-panel');
bookTpl.overwrite(detailPanel.body, r.data);
});
new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
region: 'north',
applyTo: 'header',
height: 30
},{
layout: 'border',
id: 'layout-browser',
region:'west',
border: false,
split:true,
margins: '2 0 5 5',
width: 400,
minSize: 100,
maxSize: 500,
items: [clientPanel, detailsPanel]
},
contentPanel
],
renderTo: Ext.getBody()
});
});