PDA

View Full Version : Google search InfoPanel


topcoder1
19 Jul 2007, 2:59 PM
I can't get the InfoPanel.GoogleSearch to work, I traced through the source and found that it can't find the imbedded search form using the "form" selector, see code and comments for detail:
any idea what's wrong? thanks
code for using Ext.ux.InfoPanel.GoogleSearch:


// add google search panel
var pnGoogle = new Ext.ux.InfoPanel.GoogleSearch('google-search', {
//icon: iconPath + 'magnifier.png'
//, searchBtnIcon: iconPath + 'magnifier.png'
searchTextSize: 25
, searchResultIframe: 'center-result'
});
pnGoogle.searchButton.on({
click: {
fn: function() {
layout.getRegion('center').getTabs().getTab('center-result').activate();
}}
});
layout.add('south',pnGoogle);


Ext.ux.InfoPanel.GoogleSearch source code:


Ext.ux.InfoPanel.GoogleSearch = function(el, config, content) {

if(Ext.isGecko) {
this.autoScroll = true;
}

// call parent constructor
Ext.ux.InfoPanel.GoogleSearch.superclass.constructor.call(this, el, config);

// create nicer Ext form
var gsForm = this.body.select('form').item(0);
// problem: this.body.select('form') returns a result with 0 children.
...
}


my html code:


<div id="google-search">
<form method="get" action="http://www.google.com/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></a>
<br/>
<input type="hidden" name="domains" value="extjs.com">
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="31" maxlength="255" value="" id="sbi">
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0">
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="extjs.com" id="ss1">
<label for="ss1" title="Search extjs.com"><font size="-1" color="#000000">extjs.com</font></label></td>
</tr>
</table>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb">
<input type="hidden" name="client" value="pub-2768521146228687">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="channel" value="5229340506">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="safe" value="active">
<input type="hidden" name="flav" value="0000">
<input type="hidden" name="sig" value="Q5eZe3WjG3paVCPs">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1">
<input type="hidden" name="hl" value="en">
</td></tr></table>
</form>

</div>



a slightly unrelated issue I have been having is that why don't the author of the user extension components published the original html instead of the final output html which is cluttered by the extra html ext adds on. The original html might have server side code, but at least it would give user better idea on integration. Unless there are concerns I have not thought of..
jsakalos
22 Jul 2007, 3:48 PM
This is because you need following html markup:



<div id="google-search">
<div>Panel title</div>
<div>
<!-- put your google code here -->
</div>
</div>
Re: ads & statistics code on the page: There will be clean html example page included in the release version. I'm just waiting for remaining bug reports and Ext doc parser to debug and finalize the release package.

Sorry for inconvenience with beta.
topcoder1
25 Jul 2007, 3:06 PM
thanks, but I tried this and it still can't select gsform.
this is the html I used, I tried stripping down everything and nothing helped. I had to change GoogleSearch to inherit from ContentPanel instead of InfoPanel, then it worked. It seems that some code in InfoPanel cleared the inner html and then the form no longer exists.
any idea?



<div id="google-search">
<div>Google Search</div>
<div>

<form method="get" action="http://www.google.com/custom" target="_top">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></a>
<br/>
<input type="hidden" name="domains" value="iatbm.com">
<label for="sbi" style="display: none">Enter your search terms</label>
<input type="text" name="q" size="31" maxlength="255" value="" id="sbi">
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0">
<label for="ss0" title="Search the Web"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="iatbm.com" id="ss1">
<label for="ss1" title="Search extjs.com"><font size="-1" color="#000000">extjs.com</font></label></td>
</tr>
</table>
<label for="sbb" style="display: none">Submit search form</label>
<input type="submit" name="sa" value="Search" id="sbb">
<input type="hidden" name="client" value="pub-2768521146228687">
<input type="hidden" name="forid" value="1">
<input type="hidden" name="channel" value="5229340506">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="safe" value="active">
<input type="hidden" name="flav" value="0000">
<input type="hidden" name="sig" value="Q5eZe3WjG3paVCPs">
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1">
<input type="hidden" name="hl" value="en">
</td></tr></table>
</form>
</div>

</div>


This is because you need following html markup:



<div id="google-search">
<div>Panel title</div>
<div>
<!-- put your google code here -->
</div>
</div>
Re: ads & statistics code on the page: There will be clean html example page included in the release version. I'm just waiting for remaining bug reports and Ext doc parser to debug and finalize the release package.

Sorry for inconvenience with beta.
jsakalos
25 Jul 2007, 3:37 PM
Working example from my demo page:

Markup:



<div id="google-search">
<div>9. Google search</div>
<div>
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="_top">

<!-- this part of google code stripped -->

</form>
<!-- SiteSearch Google -->
</div>
</div>
javascript:



// add google search panel
var pnGoogle = acc.add(new Ext.ux.InfoPanel.GoogleSearch('google-search', {
icon: iconPath + 'magnifier.png'
, searchBtnIcon: iconPath + 'magnifier.png'
, searchTextSize: 25
, searchResultIframe: 'center-result'
}));
acc is accordion the pnGoogle belongs to and iconPath is defined earlier in the code.

If you have still troubles there must be some difference. First what comes to my mind is if you haven't another div with same id. Such problems are easily found with validator.w3.org.
jsakalos
25 Jul 2007, 3:41 PM
Also, post your js code.

Or, do you have any link where I could see it?
topcoder1
1 Aug 2007, 12:17 AM
Does GoogleSearch need to be in an accordion? I think that's what my problem is.... it's standalone in southern region... of course... it all makes sense now..


var iconPath="images/icons/";
var p=new Ext.ux.InfoPanel.GoogleSearch('south-div',{
icon: iconPath + 'magnifier.png'
, searchBtnIcon: iconPath + 'magnifier.png'
, searchTextSize: 25
, searchResultIframe: 'search-result'
});
p.searchButton.on({
click: {
fn: function() {
mainLayout.getRegion('center').getTabs().getTab('search-result').activate();
}}
});

//alert("body is "+p.body.h.h);
//alert(p.el.select('form').getCount());
mainLayout.add('south',p);


Working example from my demo page:

Markup:



<div id="google-search">
<div>9. Google search</div>
<div>
<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="_top">

<!-- this part of google code stripped -->

</form>
<!-- SiteSearch Google -->
</div>
</div>
javascript:



// add google search panel
var pnGoogle = acc.add(new Ext.ux.InfoPanel.GoogleSearch('google-search', {
icon: iconPath + 'magnifier.png'
, searchBtnIcon: iconPath + 'magnifier.png'
, searchTextSize: 25
, searchResultIframe: 'center-result'
}));
acc is accordion the pnGoogle belongs to and iconPath is defined earlier in the code.

If you have still troubles there must be some difference. First what comes to my mind is if you haven't another div with same id. Such problems are easily found with validator.w3.org.
jsakalos
1 Aug 2007, 1:08 AM
GooglrSearchPanel is the extension of InfoPanel so it can but does not have to be in an Accordion.
topcoder1
1 Aug 2007, 9:48 PM
You are right but if I don't put it in an accordion, the google form and button don't show up.

another issue:
whenever I mouse over the search input field, this exception is thrown:
[Exception... "'Permission denied to get property HTMLDivElement.nodeType' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

only happens in firefox though.



GooglrSearchPanel is the extension of InfoPanel so it can but does not have to be in an Accordion.
jsakalos
2 Aug 2007, 2:30 AM
You are right but if I don't put it in an accordion, the google form and button don't show up.

another issue:
whenever I mouse over the search input field, this exception is thrown:
[Exception... "'Permission denied to get property HTMLDivElement.nodeType' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

only happens in firefox though.

I've put example of independed google search panel to demo page (http://aariadne.com/accordion-preview), Panels tab. Runs w/o any problems. Look there how it is done.