'Google Search' IN PANEL

**koko2589** · 7 Jun 2009 10:42 AM

//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

**Animal** · 7 Jun 2009 11:09 AM

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!

**koko2589** · 7 Jun 2009 11:12 AM

Originally Posted by Animal

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

**Animal** · 7 Jun 2009 11:53 PM

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

'Google Search' IN PANEL

Thread Tools

Search Thread

Display

'Google Search' IN PANEL

'Google Search' IN PANEL