PDA

View Full Version : 'Google Search' IN PANEL



koko2589
7 Jun 2009, 10:42 AM
http://img149.imageshack.us/img149/6818/659d.th.jpg (http://img149.imageshack.us/my.php?image=659d.jpg)

//HTML//

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

/*
* 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 (http://www.google.com/search?hl=en&rlz=1G1GGLQ_ENUS269&q=)");
}


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
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/ajaxsearch/documentation/reference.html