1. #1
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    3
    alexbariv is on a distinguished road

      0  

    Question A really dont understand why this doesnt work, please help!

    Hi.

    I'm writing an application, and already have problems just adding a toolbar.

    This is my code:

    Code:
    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
     
    Ext.namespace('myApp');
     
    myApp.app = function() {
        
        function onItemClick(){
            Ext.Msg.alert('Status', 'Changes saved successfully.');
        }
    
        myApp.ToolBar = Ext.extend(Ext.Toolbar, {
            initComponent:function() {
                var config = {
                    tbar : {
                        text    : 'Admin',
                        tooltip : {text:'Just Testing', title:'Tip'},
                         items   : [{
                            text: 'Click', handler: onItemClick,
                         }],
                    }
                };
                Ext.apply(this, Ext.apply(this.initialConfig, config));
            }
        });
    
        Ext.reg('toolbar', myApp.ToolBar);
        
        
        return {
            
            init: function(){
            
                Ext.QuickTips.init();
                
                
                var vp = new Ext.Viewport({
                    layout:'border',
                    border:true,
                    items:[{
                        region : 'north',
                        xtype  : 'toolbar'
                    },{
                        region : 'center',
                        border : false,
                        html   : ' center panel'
                    }]
                });            
            }
        };
    }();
    And in the HTML i have:

    HTML Code:
            ......
    
            <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
            <script type="text/javascript" src="lib/air/AIRMenuBuilder.js"></script>
            <script type="text/javascript" src="lib/air/AIRLocalizer.js"></script>
    
            <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="lib/ext/ext-all.js"></script>
            
            <script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
    
            <script type="text/javascript">
                Ext.onReady(myApp.app.init, myApp.app);
            </script>
        
        </head>
    
        <body id="main">
    
        </body>
        ......
    As you see i'm just trying to create a border layout with a nice toolbar at the top.

    When i run this, appear a little bar at the top, but with none of the options

    What do i have wrong ?

    Thanks in advance!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    3
    tryanDLS is on a distinguished road

      0  

    Default

    Why are you extending Toolbar to do that? That's class misuse situation of extend-to-configure. Just build the Toolbar instance.

  3. #3
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Wink You may be taking the module pattern a bit far, but...

    @alexbariv -- Some tweakage (and food for thought):

    Code:
    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
     
    Ext.namespace('myApp');
     
    myApp.app = function() {
        
        function onItemClick(){
            Ext.Msg.alert('Status', 'Changes saved successfully.');
        }
    
        myApp.ToolBar = Ext.extend(Ext.Toolbar, {
            initComponent:function() {
                var config = {
                    tbar : { 
                        text    : 'Admin',   //toolbars don't have tbars (or text), buttons do !
                         items   : [{
                             tooltip : {text:'Just Testing', title:'Tip'},
                             text: 'Click', 
                             handler: onItemClick
                         }]
                    }
                };
                myApp.ToolBar.superclass.initComponent.call(this, Ext.apply (this.initialConfig, config));
            }
        });
    
        Ext.reg('apptoolbar', myApp.ToolBar);
        
        return {
            
            init: function(){
            
                Ext.QuickTips.init();
                
                
                this.vp = new Ext.Viewport({
                    layout:'border',
                    border:true,
                    tbar : new myApp.ToolBar(),  // <--better
                    items:[{
                        region : 'north',
                        xtype  : 'apptoolbar'  //possible, but confusing
                    },{
                        region : 'center',
                        border : false,
                        html   : ' center panel'
                    }]
                });            
            }
        };
    }();
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  4. #4
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    3
    alexbariv is on a distinguished road

      0  

    Red face Nice... @alexbariv knowledge +1

    Nice, this clears a lot a lot of doubts but still doesn't work... You say that buttons have text, but, how can i define buttons in the toolbar ? i thought that was the wai.

    And yes, maybe I'm taking the module pattern far but its the only way that i see this more clear.

    The application will have a lot of forms so i thought that this will be the best approach (correct me if I'm wrong).

    Thanks in advance for all the help.

  5. #5
    Ext User
    Join Date
    Jan 2009
    Posts
    93
    Vote Rating
    0
    tob1 is on a distinguished road

      0  

    Default

    Here is an example of an login form:

    http://extjs.com/learn/Tutorial:Basic_Login

    there is a login button in the form.

    I think thats the way to do it ..

    ,buttons:[{
    text:'Login',
    handler:function(){
    }
    ....

  6. #6
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    3
    alexbariv is on a distinguished road

      0  

    Question

    So...

    Code:
        myApp.ToolBar = Ext.extend(Ext.Toolbar, {
            initComponent:function() {
                var config = {
                    buttons:[{
                        text: 'Test',
                        handler: function(){
                        }
                    }]
                };
                myApp.ToolBar.superclass.initComponent.call(this, Ext.apply (this.initialConfig, config));
            }
        });
    But still nothing...

    All the samples that i see around are without the module pattern, i cant find a sample that solve this

    Sorry, and thanks in advance for any help.

  7. #7
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Post

    Quote Originally Posted by alexbariv View Post
    .... All the samples that i see around are without the module pattern, i cant find a sample that solve this
    It's not clear (to me anyway ) just what there is 'to solve'? Few (if any) actually extend the Toolbar class just create a Toolbar module that is only good for a single purpose. But if you must, 'items' is what you seek:
    Code:
        myApp.ToolBar = Ext.extend(Ext.Toolbar, {
            initComponent:function() {
                this.items = [{
                        text: 'Test',
                        handler: function(){}
                    }];
                
                myApp.ToolBar.superclass.initComponent.call(this);
            }
        });
    Examine the source of Toolbar.js:initComponent and you'll see what going on..
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    3
    alexbariv is on a distinguished road

      0  

    Talking

    Wow! Finally!, i was trying with:

    Code:
       ....
       initComponent:function() {
                items = [{
                        text: 'Test',
                        handler: function(){}
                    }];
       ....
    I forgot for complete the scope. With "this.", everything start working

    So, now i can play with the form component too.

    This is the full code, now working with the form too, but if you could bring me a little more help, how could i make this form center in the panel like a window. Because now takes the full width and height of this.

    Code:
    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
     
    Ext.namespace('myApp');
     
    myApp.app = function() {
        
        function onItemClick(){
            Ext.Msg.alert('Status', 'Changes saved successfully.');
        }
    
        myApp.ToolBar = Ext.extend(Ext.Toolbar, {
            initComponent : function() {
                this.items = [{
                        text    : 'Test',
                        handler : function(){}
                    }];
                myApp.ToolBar.superclass.initComponent.call(this);
            }
        });
        Ext.reg('ToolBar', myApp.ToolBar);
        
        
        myApp.FormLogin = Ext.extend(Ext.FormPanel, { 
            initComponent : function() {
                Ext.apply(this, {
                    width        : 300,
                    height       : 300,
                    labelWidth   : 80,
                    frame        : true, 
                    title        : 'My Form', 
                    defaultType  : 'textfield',
                    monitorValid : true,
                });
                this.items = [{
                    fieldLabel:'Username', 
                    name:'loginUsername', 
                    allowBlank:false 
                },{ 
                    fieldLabel:'Password', 
                    name:'loginPassword', 
                    inputType:'password', 
                    allowBlank:false 
                }];
                this.buttons = [{
                    text:'Login',
                    handler:function(){ 
                           Ext.Msg.alert('Status', 'So, ok')
                    }
                }];    
                myApp.FormLogin.superclass.initComponent.call(this);
            }
        });
        Ext.reg('FormLogin', myApp.FormLogin);
    
        
        return {
            
            init: function(){
            
                Ext.QuickTips.init();
                
                
                this.vp = new Ext.Viewport({
                    layout:'border',
                    border:true,
                    items:[{
                        region : 'north',
                        xtype  : 'ToolBar',
                        border : true
                    },{
                        region : 'center',
                        xtype  : 'FormLogin',
                        border : true
                    }]
                });            
            }
        };
    }();

    This is working perfect (in adobe air btw). All that i need is take a bit more of control of the view.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,568
    Vote Rating
    55
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    Why don't you just use the class in the way you usually use classes?

    Just create a Toolbar passing a configuration.

    There is absolutely no need to create a subclass in this situation.

  10. #10
    Sencha User alexbariv's Avatar
    Join Date
    May 2009
    Location
    Mérida, Venezuela
    Posts
    67
    Vote Rating
    3
    alexbariv is on a distinguished road

      0  

    Default

    The thing is that this app will have a lot of forms, so i thought that this aproach will be the best for my issue.

    Then i create all the forms in separated js and just call them.

    Or it is a better approach ?