1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    7
    Vote Rating
    0
    deadManN is on a distinguished road

      0  

    Default 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>

  2. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    7
    Vote Rating
    0
    deadManN is on a distinguished road

      0  

    Default


    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>