1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Cool 'Google Search' IN PANEL

    'Google Search' IN PANEL




    //HTML//
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Panel</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <!-- GC -->
      <!-- LIBS -->
      <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
      <!-- ENDLIBS -->
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript" src="GoogleSearch.js"></script>
        <!-- Common Styles for the examples -->
        <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
        <style type="text/css">
        .x-panel-body p {
            margin:10px;
        }
        .container {
            padding:10px;
        }
     em.cfg { font-style: italic; font-weight: bold;}
        </style>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script>
     
    <div id="panel-basic" class="container">
    </div>
    </body>
    </html>
    //GoogleSearch.js//
    Code:
    /*
     * Ext JS Library 3.0 RC2
     * Copyright(c) 2006-2009, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    Ext.onReady(function(){
        var p = new Ext.Panel({
            title: 'Google Search',
            collapsible:true,
            renderTo: 'panel-basic', bodyStyle:"background-color:#ffffff",
            width:400, height: 270 ,
           layout:'border',
    defaults: {
     
        split: true,
        bodyStyle: 'padding:0px'
    },
    items: [{
         layout:'fit',
    items:new Ext.form.FieldSet({
     
              title:'<b><font face=times color=#0039b6 siz=6>G</font><font face=times color=#c41200 siz=6>O</font><font face=times color=#f3c518 siz=6>O</font><font face=times color=#0039b6 sze=6>G</font><font face=times color=#30a72f sie=6>L</font><font face=times color=#c41200 siz=6>E</font></b>     ',    width       : 390,        
               autoHeight: true,
               defaultType: 'textfield',    items:    
                      q
                      ,
                buttons:[{text:'Search  ',handler: function() {searchG();}},{text:'clear', handler: function() {searchreset();}}]
             }),
     
     
                    labelAlign: 'right',
                    buttonAlign:'center',
                    labelWidth: '270',fieldLabelWidth: '270',
                    waitMsgTarget: true ,
        region: 'south', border:false,
        height: 100,
        minSize: 75,
        maxSize: 250,margins:'15 10 10 10',
        cmargins: '45 40 40 40'
    },{
     
        bodyCfg: {
            tag: 'center',
            cls: 'x-panel-body'
        },
    html: '<img src="http://itoto1.com/desktop/logo_plain.png"> ',
        collapsible: false,
        region:'center',border:false,
        margins: '0 0 0 0'
    }]
        });
     
    });
    var q = new Ext.form.TextField({
                    fieldLabel: 'Google Search',
                    name: 'q',
                    anchor: '98%'
                    });
     
     
    function searchG() {
    window.open("http://www.google.com/search?hl=en&rlz=1G1GGLQ_ENUS269&q="+q.getValue()+"&btnG=Search");
    }
     
     
    function searchreset()
    {
    q.setValue('');
    }
    DEMO IN MY SITE
    my ext js site
    http://www.itoto4.com/

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You'd do better spending some time and energy learning some of this: http://code.google.com/apis/ajax/

    window.open(<a url>) is hardly cutting Edge ExtJs stuff you know!

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    356
    Vote Rating
    0
    koko2589 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    You'd do better spending some time and energy learning some of this: http://code.google.com/apis/ajax/

    window.open(<a url>) is hardly cutting Edge ExtJs stuff you know!
    BUT I LIKE GOOGLE SAERCH USING EXT JS
    my ext js site
    http://www.itoto4.com/

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, then here's an excercise for you.

    Do it "properly" using their API to display the results in a DataView: http://code.google.com/apis/ajaxsear...reference.html

Thread Participants: 1