October 9th, 2007 by W.Regenczuk

QuickSearch

The QuickSearch is not WordPress widget, it is internal theme stuff; made as easy as possible. As in other places I have started with breaking WordPress’ template hierarchy: I have created new template file called “json_data.php”. The template is meant to output JSON. If there is no json php extension on the server it uses HTML_AJAX_JSON class taken from PEAR’s HTML_AJAX package. To be honest I did not look into HTML_AJAX_JSON very closely. I have checked the license of the package and I have checked it works exactly as I needed; that is all.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php 
if(!function_exists('get_option'))
  require_once('../../../wp-config.php');
 
$out = array();
if (have_posts()) { 
    while (have_posts()) {
        the_post(); 
        $id = get_the_ID();
        $out[] = array(
            'id'        => $id,
            'title'     => get_the_title($id),
            'content'   => substr(strip_tags(get_the_content()), 0, 128)."...",
            'author'    => get_the_author(),
        );
    }
} else {
        $out[] = array(
            'id'        => 0,
            'title'     => 'Not found.',
            'content'   => "Sorry, no posts matched your criteria....",
            'author'    => 'Administrator',
        );
}
 
 
if (!extension_loaded('json')) {
    require_once('JSON.php');
    $json = new HTML_AJAX_JSON();
    echo $json->encode(array('result' => $out));
} else {
    echo json_encode(array('result' => $out));
}
 ?>

Then on theme.js I have put the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
. . .
setupLiveSearch: function() {
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: Wp.bloginfo.url + '?jsonData=true'
        }),
        reader: new Ext.data.JsonReader({
            root: 'result',
            id: 'id'
        }, [
            {name: 'title', mapping: 'title'},
            {name: 'id', mapping: 'id'},
            {name: 'author', mapping: 'author'},
            {name: 'content', mapping: 'content'}
        ])
    });
 
    var resultTpl = new Ext.Template(
        '<div class="search-item">',
            '<h4>{title}<br /></h4>',
            '{content}',
        '</div>'
    );
    var search = new Ext.form.ComboBox({
        store: ds,
        minChars: 2,
        displayField:'title',
       	queryParam:'s',
        tpl: resultTpl,
        onSelect: function(record){ // override default onSelect to do redirect
            this.loadPosts(Wp.bloginfo.url + '?p=' + record.id);
        }.createDelegate(this)
    });
    // apply it to the exsting input element
    search.applyTo('liveseach');
 
}
. . .
</script>

It works exactly as I wanted it to work, but if you have a better idea of quicksearch behavior please let me know.

ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme
Pages: 1 2 3 4 5 6 7 8 9
7 Responses to “Ext JS Theme Revealed”
Nico says:

Testing theme =)

Great app

testando says:

testando, m testando, m testando, m testando, m

Khashayar says:

well done

Me says:

good!

bywide says:

nice … O_O

Trojan, says:

hello! i like this themes, but i can’t install.why ? pls help me!