1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    EjChuLim is on a distinguished road

      0  

    Default 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


    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,789
    Answers
    3465
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Your grid doesn't look like it's valid JavaScript.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    EjChuLim is on a distinguished road

      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
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    EjChuLim is on a distinguished road

      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
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    EjChuLim is on a distinguished road

      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
    8,927
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

Thread Participants: 2

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi