Member Avatar
arcticM

Hello, I'm trying to implement a grid from Ext Js 4.

I have index.php, which is the main page that has the main html (<html><head></head><body></body></html>)
and a div inside the body. everything on my application is displayed inside that 1 div. in other words I'm using OOP PHP and Ajax.

I have a menu on my main page and when I click on a specific option I want the grid to appear in the div (<div id="layer1" name="layer1"></div>)

all the examples for Extjs grid use a different html file where u add those line:

        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="extjs/examples/shared/example.css" />
        <link rel="stylesheet" type="text/css" href="extjs/examples/restful/restful.css" />

        <script type="text/javascript" src="extjs/ext-all.js"></script>
        <script type="text/javascript" src="extjs/examples/shared/examples.js"></script>
        <script type="text/javascript" src="extjs/examples/restful/restful.js"></script>

and the grid is appended to the body by the restful.js.

this doesn't work for me..since in my case the grid would appear on the screen regardless of what option I choose from the menu (because the html page isn't refreshed each time).

I'm trying to change the restful.JS so that it won't run onReady() as it does now, but when I call the function that is now running onReady. I'm doing something wrong because it doesn't work..
on my index.php I added those 6 lines of code as above to the <head>, and I changed the restful.js code from

Ext.onReady(function(){
.....

to

Ext.onReady(start_users(););

function start_users() {

....

and also another change was in the part where it says where to add the grid- from

renderTo: document.body,

to

renderTo: document.body.layer1,

when I run this I don't see the grid. checking the scripts in the inspect elements in Chrome, it says start_users() is undefined. not sure I'm doing this right, but if onReady the code ran, and all I did is to put the same code inside another function and now onReady calls THAT function, how come it doesn't run!?

full restful.js code: (after my changes)

Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int',
        useNull: true
    },{
        name: 'R',
        type: 'int',
        useNull: true
    }, 'email', 'first', 'last'],
    validations: [{
        type: 'length',
        field: 'email',
        min: 1
    }, {
        type: 'length',
        field: 'first',
        min: 1
    }, {
        type: 'length',
        field: 'last',
        min: 1
    }]
});



Ext.onReady(start_users(););

function start_users() {

    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Person',
        proxy: {
            type: 'rest',
            url: 'app.php/users',
            reader: {
                type: 'json',
                root: 'data'
            },
            writer: {
                type: 'json'
            }
        },
        listeners: {
            write: function(store, operation){
                var record = operation.getRecords()[0],
                    name = Ext.String.capitalize(operation.action),
                    verb;


                if (name == 'Destroy') {
                    record = operation.records[0];
                    verb = 'Destroyed';
                } else {
                    verb = name + 'd';
                }
                Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));

            }
        }
    });

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body.layer1,
        plugins: [rowEditing],
        width: 400,
        height: 300,
        frame: true,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [{
            text: 'ID',
            width: 40,
            sortable: true,
            dataIndex: 'id'
        }, {
            text: 'R',
            flex: 1,
            sortable: true,
            dataIndex: 'R',
            field: {
                xtype: 'textfield'
            }
        },{
            text: 'Email',
            flex: 1,
            sortable: true,
            dataIndex: 'email',
            field: {
                xtype: 'textfield'
            }
        }, {
            header: 'First',
            width: 80,
            sortable: true,
            dataIndex: 'first',
            field: {
                xtype: 'textfield'
            }
        }, {
            text: 'Last',
            width: 80,
            sortable: true,
            dataIndex: 'last',
            field: {
                xtype: 'textfield'
            }
        }],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function(){
                    // empty record
                    store.insert(0, new Person());
                    rowEditing.startEdit(0, 0);
                }
            }, '-', {
                itemId: 'delete',
                text: 'Delete',
                iconCls: 'icon-delete',
                disabled: true,
                handler: function(){
                    var selection = grid.getView().getSelectionModel().getSelection()[0];
                    if (selection) {
                        store.remove(selection);
                    }
                }
            }]
        }]
    });
    grid.getSelectionModel().on('selectionchange', function(selModel, selections){
        grid.down('#delete').setDisabled(selections.length === 0);
    });
};
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.