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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar