-
26 Dec 2012 3:46 PM #1Sencha User
- Join Date
- Dec 2012
- Posts
- 7
- Vote Rating
- 0
extjs grid panel and php
extjs grid panel and php
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>
-
27 Dec 2012 7:33 AM #2Sencha User
- Join Date
- Dec 2012
- Posts
- 7
- Vote Rating
- 0
and here's the output,
any idea why it doesnt render the grid to the div?
Code:<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:s A' } //{ name: 'salary', type: 'float' } ] }); Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var data= [ [1, 'a', '902', 0, '255.255.255.255', 0, '', -1, 0, -1, 0, 0, '2012-10-04 19:05:33'], [1, 'b', '901', 0, '255.255.255.255', 0, '', -1, 0, -1, 0, 1, '2012-12-25 21:30:31'], [1, 'c', '900899', 1, '255.255.255.0-0.0.0.75', 0, '', -1, 0, -1, 0, 0, '2012-12-27 01:51:26'] ] // 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:s 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:s 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>
Reply With Quote