1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Chilpancingo, gro. Mexico
    Posts
    1
    Vote Rating
    0
    gcarlo is on a distinguished road

      0  

    Exclamation JSP + Extjs methods are getting a "not a function" message error (Java + Struts app)

    JSP + Extjs methods are getting a "not a function" message error (Java + Struts app)


    Hi all, this is my first participation in sencha forum.

    I'm a very new in this, I just saw some examples and I got impress by Ext JS.
    I choosed this framework for one project (Java + Struts + Hibernate + ExtJS) and learning but I'm having a lot of troubles.

    I have a JSP with some javascript and I would like manipulate objects with Ext methods to add a grid on select action.

    For example I tried this:
    Code:
    some_component = viewport.getComponent('some_id_component');
    some_component = some_component.appendChild(grid);
    or even
    Code:
    alert(Ext.ClassManager.getClassName(some_component));
    Result:
    Code:
    some_component.appendChild is not a function
    or
    Code:
    Ext.ClassManager.getClassName is not a function
    Some body would like to help me or suggess something

    Any ideas?

    This is the page code:
    HTML Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css"></link>
    
    <script type="text/javascript" src="ext-4/bootstrap.js"></script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Init page</title>
    
    <script type="text/javascript">
    Code:
    Ext.Loader.setConfig({enabled:true, basePath: 'ext-4/src'});
    
    Ext.Loader.setPath('Ext.ux', 'ext-4/ux/statusbar');
    
    Ext.require([
                 'Ext.grid.*',
                 'Ext.data.*',
                 'Ext.util.*',
                 'Ext.state.*',
                 'Ext.ux.StatusBar'
                 ]);
    
    Ext.onReady(function() {
       
        Ext.QuickTips.init();
       
        var bd = Ext.getBody();
       
        var datos = [[1,"2005-01-01 00:00:00.0",0,15],[2,"2005-01-01 00:00:00.0",15.01],[3,"2005-01-01 00:00:00.0",30.01,45],[4,"2005-01-01 00:00:00.0",45.01,60]];
       
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'idTabArt130DomConMedidor'},
               {name: 'fecVigencia', type: 'date', dateFormat: 'n/j h:ia'},
               {name: 'rangoDe',      type: 'float'},
               {name: 'rangoA',      type: 'float'}
            ],
            sorters: ['idTabArt130DomConMedidor'],
            data: datos
        });
       
        // create the Grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            stateful: true,
            stateId: 'stateGrid',
            columns: [
                {
                    text     : 'id',
                    flex     : 1,
                    sortable : true,
                    //renderer : createIdLink,
                    dataIndex: 'idTabArt130DomConMedidor'
                },
                {
                    text     : 'Vigencia',
                    height     : 60,
                    width    : 85,
                    sortable : false,
                    renderer : Ext.util.Format.dateRenderer('d/m/Y'),
                    dataIndex: 'fecVigencia'
                },
                {
                    text     : 'De<br/>(Rango)',
                    height     : 60,
                    width    : 75,
                    sortable : false,
                    dataIndex: 'rangoDe'
                },
                {
                    text     : 'A<br/>(Rango)',
                    height     : 60,
                    width    : 75,
                    sortable : false,
                    dataIndex: 'rangoA'
                }
            ],
            autoHeight: true,
            width: 900,
            title: 'Array Grid',
            viewConfig: {
                stripeRows: true
            }
        });
    
        var tree = Ext.create('Ext.tree.Panel', {
            height: 360,
            minSize: 150,
            rootVisible: false,
            autoScroll: true,
            animate: true,
            root: {
                text: '.',
                expanded: true,
                children:[{
                    text: 'Folders',
                    leaf: false,
                    expanded: true,
                    children: [{
                        text: 'Some folder',
                        leaf: false,
                        children:[{
                            text: 'leaf 1',
                            leaf: true,
                            id: 'some_id_1'
                        },{
                            text: 'leaf 2',
                            leaf: true,
                            id: 'some_id_2'
                        }]
                    }]
                }, {
                    text: 'Some folder 2',
                    leaf: false,
                    children: [{
                        text: 'Some leaf 3',
                        leaf: true,
                        id: 'some_id_3'
                    }, {
                        text: 'Some leaf 4',
                        leaf: true,
                        id: 'some_id_4'
                    }]
                }]
            }
        });
    
        tree.getSelectionModel().on('select', function(selModel, record) {
            if (record.get('leaf')) {
                art130_domConMedidorListar = viewport.getComponent('componente_central');
                sb = Ext.getCmp('main-status-bar');
                sb.showBusy();
                art130_domConMedidorListar.appendChild(grid);
            }
        });
    
       
        var viewport = Ext.create('Ext.Viewport', {
            layout: {
                type: 'border',
                padding: 5
            },
            defaults: {
                split: true
            },
            items: [{
                region: 'west',
                id: 'componente_izquierdo',
                title: 'Menu',
                collapsible: true,
                split: true,
                width: '25%',
                items:[tree]
            },{
                region: 'center',
                id: 'componente_central',
                title: 'CONTENIDO',
                html: 'Contenido inicial',
                collapsible: false,
                autoScroll: true,
                autoLoad:{
                    url:'some_page.jsp'
                },
                bbar: Ext.create('Ext.ux.StatusBar', {
                    id: 'main-status-bar',
                    // defaults to use when the status is cleared:
                    defaultText: 'Default status text',
                    // values to set initially:
                    text: 'Listo',
                    iconCls: 'x-status-valid'
                })
            }]
        });
        renderTo: bd
    });
    HTML Code:
    </script>
    
    </head>
    <body>
    
    </body>
    </html>
    Thanks!!!
    Last edited by gcarlo; 23 Jun 2011 at 2:46 PM. Reason: specs

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..."