include ('./UserEntity.php');
include ('./IOController.php');


$ioc=new IOController("AccInfo.ini");
$reader = $ioc->readUsersData();
?>

<html>
<head>
<title>
Welcome To Proxy Administrator Page
</title>
<link rel="stylesheet" href="ext-4.0.7-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.7-gpl/ext-all.js"/>
<!--<script type="text/javascript" src="js/view.js"/>-->

</head>
<body>

<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);

Ext.onReady(function(){
// Define our data model
Ext.define('Users', {
extend: 'Ext.data.Model',
fields: [
{ name: 'enable', type: 'bool' },
'username',
'password',
{ name: 'ipEnable', type: 'bool' },
'ipAddress',
{ name: 'macEnable', type: 'bool' },
'macAddress',
{ name: 'connection', type: 'int' },
{ name: 'connectionUsed', type: 'int'},
{ name: 'bandwidth', type: 'int' },
{ name: 'bandWidthUsed', type: 'int'},
{ name: 'autoDisableEnable', type: 'bool' },
{ name: 'autoDisableDate', type: 'date', dateFormat: 'n/j/Y H:i A' }
//{ name: 'salary', type: 'float' }
]
});

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
<?php
echo "var data= [";
$first=true;

foreach ($reader as $key=>$user)
{
if ($first)
{
$first=false;
echo "\n";
}
else
{
echo ", \n";
}

echo "[";
echo $user->getEnable();
echo ", '";
echo $user->getUserName();
echo "', '";
echo $user->getPassword();
echo "', ";
echo $user->getEnableIPAddress();
echo ", '";

if($user->getIPAddressLow()==$user->getIPAddressHigh())
{
echo $user->getIPAddressLow();
}else{
echo $user->getIPAddressLow();
echo "-";
echo $user->getIPAddressHigh();
}
echo "', ";
echo $user->getEnableMACAddress();
echo ", '";
echo $user->getMACAddress();
echo "', ";
echo $user->getMaxConn();
echo ", ";

echo "0, ";

echo $user->getBandWidth();
echo ", ";

echo "0, ";


echo $user->getAutoDisable();
echo ", '";
echo $user->getDisableDateTime();
echo "']";
}

echo "\n]";
?>

// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Users',
proxy: {
type: 'memory'
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});

// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [ {
xtype: 'checkcolumn',
header: 'Enable',
dataIndex: 'enable',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}, {
header: 'User Name',
dataIndex: 'username',
flex: 1,
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: 'Password',
dataIndex: 'password',
flex: 1,
editor: {
allowBlank: false//,
//vtype: 'email'
}
}, {
xtype: 'checkcolumn',
header: 'IP Enable',
dataIndex: 'ipEnable',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}, {
header: 'IP Address',
dataIndex: 'ipAddress',
flex: 1,
editor: {
allowBlank: false//,
//vtype: 'email'
}
}, {
xtype: 'checkcolumn',
header: 'Mac Enable',
dataIndex: 'macEnable',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}, {
header: 'MAC Address',
dataIndex: 'macAddress',
flex: 1,
editor: {
allowBlank: false//,
//vtype: 'email'
}
}, {
xtype: 'numbercolumn',
header: 'Connections',
dataIndex: 'connection',
format: '0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: -1//,
//maxValue: 150000
}
}, {/////////////////////////////////////////////////////////
xtype: 'numbercolumn',
header: 'Used',
dataIndex: 'connectionUsed',
format: '0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: -1//,
//maxValue: 150000
}
}, {
xtype: 'numbercolumn',
header: 'Bandwidth',
dataIndex: 'bandwidth',
format: '0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: -1//,
//maxValue: 150000
}
}, {/////////////////////////////////////////////////////////
xtype: 'numbercolumn',
header: 'Used',
dataIndex: 'bandwidthUsed',
format: '0',
width: 90,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: -1//,
//maxValue: 150000
}
}, {
xtype: 'checkcolumn',
header: 'Auto Disable',
dataIndex: 'autoDisableEnable',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}, {
xtype: 'datecolumn',
header: 'End Date',
dataIndex: 'autoDisableDate',
width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y H:i A',
minValue: '01/01/2012',
minText: 'Cannot have a start date before the page exist!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y H:i A')
}
}
//, {
//xtype: 'numbercolumn',
//header: 'Salary',
//dataIndex: 'salary',
//format: '$0,0',
//width: 90,
//editor: {
// xtype: 'numberfield',
// allowBlank: false,
// minValue: 1,
// maxValue: 150000
//}
//}, {
// xtype: 'checkcolumn',
// header: 'Active?',
// dataIndex: 'active',
// width: 60,
// editor: {
// xtype: 'checkbox',
// cls: 'x-grid-checkheader-editor'
// }
// }
],
renderTo: 'editor-grid',
width: 800,
height: 400,
title: 'CCProxy User Information and Editing',
frame: true,
tbar: [{
text: 'Add User',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();

// Create a model instance
var r = Ext.create('Users', {
//email: 'new@sencha-test.com',
enable: true,
username: 'New Guy',
password: 'abc',
ipAddress: '',
ipEnable: false,
macAddress: '',
macEnable: false,
connection: -1,
connectionUsed: 0,
bandwidth: -1,
bandwidthUsed: 0,
autoDisableEnable: true,
autoDisableDate: new Date()
//salary: 50000,
//active: true
});

store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeUsers',
text: 'Remove Users',
iconCls: 'users-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeUsers').setDisabled(!records.length);
}
}
});
});
</script>

<div id="editor-grid"></div>
</body>
</html>