I need help in Displaying a simple form with grid. HELP im new to extjs

**EjChuLim** · 13 Apr 2012 12:49 AM

I am a beginner in extjs and extjs 4, and i have been looking at examples of making a form. i decided learn how to make the structure first using notepad++ then i had am having a hard time displaying the panel and grid.

this is my app.js code:

Code:

Ext.define('registration',
{   
    extend:'Ext.form.Panel',
    alias: 'widget.form',
    title:'Form',
    
defaultType:'textfield',
items: [{
    fieldLabel: 'Name',
    name:'name',
    allowBlank:false
},{
    fieldLabel:'Email',
    name:'mail',
    allowBlank:false,
    vtype:'mail'
},{
    fieldLabel:'Password',
    inputType:'password',
    name:'pass',
    allowBlanl:false
},{
    xtype:'button',
    text:'Submit',
    //handler:'blank.php'
    }],
this.callParent();
});

Ext.define('gridform', {
extend:'Ext.grid.Panel',
alias:'widget.grid',                
title:'sample',
store:Ext.data.StoreManager.lookup('samplestore'),
this.editing = Ext.create('Ext.grid.plugin.CellEditing');
columns: [
    {header: 'Name', dataIndex:'uname'},
    {header: 'Email', dataIndex:'email'},
    {header: 'Password', dataIndex:'passw'}],
this.callParent();

});

Ext.create('Ext.data.Store', {
storeId:'samplestore',
fields:['uname','email','passw'],
data:{'items': [{'uname':'zz', 'email':'yy', 'passw':'zzz'},
        {'uname':'c', 'email':'b', 'passw':'a'}]}
});
Ext.onReady(function(){

var main = Ext.create('Ext.container.Container', {
        padding: '0 0 0 20',
        width: 500,
        height: 450,
        renderTo: document.body,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            itemId: 'ej',
            xtype: 'form',
            height: 150,
            margins: '0 0 10 0',
        },{
            itemId: 'grid',
            xtype: 'grid',
           height: 150,
            margins: '0 0 10 0',
        }]
    });
});

this is my index.html code:

Code:

<html>
<head>
    <title>Hello Ext</title>
 
    <link rel="stylesheet" type="text/css" href="extjs/ext-4.0.7-gpl/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-4.0.7-gpl/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

what exactly am i missing??? please help..

**mitchellsimoens** · 13 Apr 2012 8:01 AM

Your grid doesn't look like it's valid JavaScript.

**scottmartin** · 13 Apr 2012 8:06 AM

There were a few syntax errors, and unneeded methods. Also, the cellEditing should be added as a plugin:
Please see the following changes to your code:

Watch for trailing comma's in your code.

Code:

Ext.define('registration', {
    extend: 'Ext.form.Panel',
    alias: 'widget.form',
    title: 'Form',

    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name',
        allowBlank: false
    }, {
        fieldLabel: 'Email',
        name: 'mail',
        allowBlank: false,
        vtype: 'mail'
    }, {
        fieldLabel: 'Password',
        inputType: 'password',
        name: 'pass',
        allowBlanl: false
    }, {
        xtype: 'button',
        text: 'Submit'
        //handler:'blank.php'
    }]
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});


Ext.define('gridform', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.grid',
    title: 'sample',
    store: Ext.data.StoreManager.lookup('samplestore'),
    //this.editing = Ext.create('Ext.grid.plugin.CellEditing');
    columns: [{
        header: 'Name',
        dataIndex: 'uname'
    }, {
        header: 'Email',
        dataIndex: 'email'
    }, {
        header: 'Password',
        dataIndex: 'passw'
    }],

    plugins: [cellEditing]

});

Ext.create('Ext.data.Store', {
    storeId: 'samplestore',
    fields: ['uname', 'email', 'passw'],
    data: {
        'items': [{
            'uname': 'zz',
            'email': 'yy',
            'passw': 'zzz'
        }, {
            'uname': 'c',
            'email': 'b',
            'passw': 'a'
        }]
    }
});
Ext.onReady(function() {

    var main = Ext.create('Ext.container.Container', {
        padding: '0 0 0 20',
        width: 500,
        height: 450,
        renderTo: document.body,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            itemId: 'ej',
            xtype: 'form',
            height: 150,
            margins: '0 0 10 0'
        }, {
            itemId: 'grid',
            xtype: 'grid',
            height: 150,
            margins: '0 0 10 0'
        }]
    });
});

Regards,
Scott.

**EjChuLim** · 13 Apr 2012 3:54 PM

I have copy paste your code yet it still does not run. you had a mistake in line 20 with the allowBlank, i changed it and tried to run it, still nothing happened.

**scottmartin** · 13 Apr 2012 8:56 PM

Are you receiving any errors on the console?

This what I see with your code:

f195207.png

Scott.

**EjChuLim** · 13 Apr 2012 9:25 PM

it kept on saying error in line 37, but its syntax is correct. you tried running the code i posted and it worked out fine?

**scottmartin** · 13 Apr 2012 9:43 PM

This code is running on my system just fine. I moved the store above the grid in this version, but the previous version I posted ran fine as shown in my screen. Your original version did not run. Syntax errors

Using 4.1RC3

If you receive any errors, comment out that line and try again. You can always use firebug later to place a breakpoint on that line to see what is not resolving.

Code:

Ext.define('registration', {
    extend: 'Ext.form.Panel',
    alias: 'widget.form',
    title: 'Form',

    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name',
        allowBlank: false
    }, {
        fieldLabel: 'Email',
        name: 'mail',
        allowBlank: false,
        vtype: 'mail'
    }, {
        fieldLabel: 'Password',
        inputType: 'password',
        name: 'pass',
        allowBlank: false
    }, {
        xtype: 'button',
        text: 'Submit'
        //handler:'blank.php'
    }]
});

Ext.create('Ext.data.Store', {
    storeId: 'samplestore',
    fields: ['uname', 'email', 'passw'],
    data: {
        'items': [{
            'uname': 'zz',
            'email': 'yy',
            'passw': 'zzz'
        }, {
            'uname': 'c',
            'email': 'b',
            'passw': 'a'
        }]
    }
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

Ext.define('gridform', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.grid',
    title: 'sample',
    store: Ext.data.StoreManager.lookup('samplestore'),
    //this.editing = Ext.create('Ext.grid.plugin.CellEditing');
    columns: [{
        header: 'Name',
        dataIndex: 'uname'
    }, {
        header: 'Email',
        dataIndex: 'email'
    }, {
        header: 'Password',
        dataIndex: 'passw'
    }],

    plugins: [cellEditing]

});

Ext.onReady(function() {

    var main = Ext.create('Ext.container.Container', {
        padding: '0 0 0 20',
        width: 500,
        height: 450,
        renderTo: document.body,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            itemId: 'ej',
            xtype: 'form',
            height: 150,
            margins: '0 0 10 0'
        }, {
            itemId: 'grid',
            xtype: 'grid',
            height: 150,
            margins: '0 0 10 0'
        }]
    });
});

Regards,
Scott.

**EjChuLim** · 15 Apr 2012 5:20 PM

proxy is undefined
anonymous() ext-debug.js (line 8151)

anonymous() ext-debug.js (line 8108)

callParent(args=[Object { storeId="samplestore", fields=[3]}]) ext-debug.js (line 4800)

anonymous() ext-debug.js (line 8245)

newClass() ext-debug.js (line 5372)

anonymous() ext-debug.js (line 6662)

instantiate() ext-debug.js (line 6634)

alias() ext-debug.js (line 2448)

app.js() app.js (line 28)

[IMG]chrome://firebug/content/blank.gif[/IMG]

Class.registerPreprocessor('loader', function(cls, data, continueFn) {

ext-debug.js (line 8151)

LINE 28 HAS THE CODE "Ext.create('Ext.data.Store', {"

**scottmartin** · 16 Apr 2012 7:00 AM

Do you have your path setup correctly for ExtJS? You should not be receiving these errors.

Scott.

I need help in Displaying a simple form with grid. HELP im new to extjs

Thread Tools

Search Thread

Display

Unanswered: I need help in Displaying a simple form with grid. HELP im new to extjs

Unanswered: I need help in Displaying a simple form with grid. HELP im new to extjs

Tags for this Thread