Mega Code Archive
Combine Ext ux form SearchField and php script
<![CDATA[
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/SearchField.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-remote.php'
}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
}, [
{name: 'postId', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'},
{name: 'topicId', mapping: 'topic_id'},
{name: 'author', mapping: 'author'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'excerpt', mapping: 'post_text'}
]),
baseParams: {limit:20, forumId: 4}
});
// Custom rendering Template for the View
var resultTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="search-item">',
'<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>',
'<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>',
'<p>{excerpt}</p>',
'</div></tpl>'
);
var panel = new Ext.Panel({
applyTo: 'search-panel',
title:'Forum Search',
height:300,
autoScroll:true,
items: new Ext.DataView({
tpl: resultTpl,
store: ds,
itemSelector: 'div.search-item'
}),
tbar: [
'Search: ', ' ',
new Ext.ux.form.SearchField({
store: ds,
width:320
})
],
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 20,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
ds.load({params:{start:0, limit:20, forumId: 4}});
});
</script>
<div style="width:600px;" id="search-panel">
</div>
</body>
</html>
]]>