/*

 * Ext JS Library 1.1

 * Copyright(c) 2006-2007, 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.Template(

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

    );



    var view = new Ext.View('search-results', resultTpl, {store: ds});



    var tb = new Ext.Toolbar('search-tb', [

        'Search: ', ' ',

        new Ext.app.SearchField({

            store: ds,

            width:320

        })

    ]);



    new Ext.PagingToolbar('page-tb', 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}});

});



/**

 * The custom search field

 */



Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {

    initComponent : function(){

        Ext.app.SearchField.superclass.initComponent.call(this);

        this.on('specialkey', function(f, e){

            if(e.getKey() == e.ENTER){

                this.onTrigger2Click();

            }

        }, this);

    },



    validationEvent:false,

    validateOnBlur:false,

    trigger1Class:'x-form-clear-trigger',

    trigger2Class:'x-form-search-trigger',

    hideTrigger1:true,

    width:180,

    hasSearch : false,

    paramName : 'query',



    onTrigger1Click : function(){

        if(this.hasSearch){

            var o = {start: 0};

            o[this.paramName] = '';

            this.store.reload({params:o});

            this.el.dom.value = '';

            this.triggers[0].hide();

            this.hasSearch = false;

        }

    },



    onTrigger2Click : function(){

        var v = this.getRawValue();

        if(v.length < 1){

            this.onTrigger1Click();

            return;

        }

        var o = {start: 0};

        o[this.paramName] = v;

        this.store.reload({params:o});

        this.hasSearch = true;

        this.triggers[0].show();

    }

});