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

      0  

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

    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
    2
    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 - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    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...

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

      0  

    Red face Nice... @alexbariv knowledge +1

    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
    2
    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 - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    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
    2
    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,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      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
    2
    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 ?

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