Results 1 to 9 of 9

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

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
      0  

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

    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..
    Last edited by mitchellsimoens; 13 Apr 2012 at 7:27 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Your grid doesn't look like it's valid JavaScript.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

    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.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    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.

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

    Are you receiving any errors on the console?

    This what I see with your code:

    f195207.png

    Scott.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    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?

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

    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.

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default

    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', {"

  9. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,390
    Answers
    716
    Vote Rating
    498
      0  

    Default

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

    Scott.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •