1. #1
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default Grid search

    Grid search


    (Sorry for my English)

    Hey,

    This is my solution for search into a grid. There are two types of search: ClienteSide and ServerSide, each of types are configurable for single or multiple search (Radiobuttons or checkitems in menu).

    I add HistoryCombobox.js and ClearableCombobox.js in HistoryClearableCombobox.js, and I add two simple config options: hideComboTrigger and hideClearTrigger.

    I create a reusable class (GridSearch) or create the search combos into a toolbar, I use HitoryClearableCombobox inside GridSearch.js:

    [CODE] var search1 = new GridSearch({
    tb: tb,
    ds: ds,
    cm: cm,
    serverSearch: true,
    quickSearch: true,
    multipleServerSearch: true,
    multipleQuickSearch: false,
    serverSearchText: 'B
    Attached Images
    Attached Files

  2. #2
    Sencha User trbs's Avatar
    Join Date
    Mar 2007
    Posts
    310
    Vote Rating
    0
    trbs is on a distinguished road

      0  

    Default


    Hey Galdaka,

    Your lots quicker then i am My user extensions will take most likely at least a few more weeks until i've rewriten everything, cleaned it up and had time to published my user extension.

    Think it's great too already provide this as a user extensions for other people, thanks mate!

    I only have 2 questions for you:
    1. I believe in credit where credit is due, please add a small credit/link to my PIR example. (and of course add credits for yourself too, btw i'm just asking it cause it would be nice ) also some of the standard doc types used in for example Jozef's extensions would be nice to have.
    2. Please rename the Objects to Ext.ux.grid.GridSearch instead of gridsearch. So it's in the proper User eXtension namespace

    Thanks for sharing !!

    Regards,
    trbs
    I'm part of the Ext Community
    Maintaining: Translations and some Examples
    Developing on: ExtJS Python Builder / Gozerbot
    Places: Ido.nl.eu.org / My ExtSamples / Trbs on Wiki / IRC

  3. #3
    Ext User kei's Avatar
    Join Date
    Jun 2007
    Location
    Lala Land
    Posts
    25
    Vote Rating
    0
    kei is on a distinguished road

      0  

    Default


    Beautiful work, guys.
    How do I make other config like setting emptyText, default selected columns, and the possibility of hiding the column selection menu? (Sounds like I'm planning a global grid search, ne? )

  4. #4
    Ext User
    Join Date
    Aug 2007
    Posts
    96
    Vote Rating
    0
    vibez is on a distinguished road

      0  

    Default


    Hello galdaka

    Thank you very much for the grid search, it is just what I was looking for. unfortunately for me the button width for serverSearchText & quickSearchText does not automatically set to the correct width.

    I have added your UX to the basic paging demo grid that comes in the extjs examples folder.

    Here is the code using extjs 1.1.1

    [PHP]/*
    * Ext JS Library 1.1.1
    * Copyright(c) 2006-2007, Ext JS, LLC.
    * licensing@extjs.com
    *
    * http://www.extjs.com/license
    */

    Ext.onReady(function(){

    // create the Data Store
    var ds = new Ext.data.Store({
    // load using script tags for cross domain, if the data in on the same domain as
    // this page, an HttpProxy would be better
    proxy: new Ext.data.ScriptTagProxy({
    url: 'http://extjs.com/forum/topics-remote.php'
    }),

    // create reader that reads the Topic records
    reader: new Ext.data.JsonReader({
    root: 'topics',
    totalProperty: 'totalCount',
    id: 'post_id'
    }, [
    {name: 'title', mapping: 'topic_title'},
    {name: 'author', mapping: 'author'},
    {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
    {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
    {name: 'excerpt', mapping: 'post_text'}
    ]),

    // turn on remote sorting
    remoteSort: true
    });


    // pluggable renders
    function renderTopic(value, p, record){
    return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
    }
    function renderTopicPlain(value){
    return String.format('<b><i>{0}</i></b>', value);
    }
    function renderLast(value, p, r){
    return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
    }
    function renderLastPlain(value){
    return value.dateFormat('M j, Y, g:i a');
    }

    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store
    var cm = new Ext.grid.ColumnModel([{
    id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
    header: "Topic",
    dataIndex: 'title',
    width: 490,
    renderer: renderTopic,
    css: 'white-space:normal;'
    },{
    header: "Author",
    dataIndex: 'author',
    width: 100,
    hidden: true
    },{
    id: 'last',
    header: "Last Post",
    dataIndex: 'lastPost',
    width: 150,
    renderer: renderLast
    }]);



    // create the editor grid
    var grid = new Ext.grid.Grid('topic-grid', {
    ds: ds,
    cm: cm,
    selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
    enableColLock:false,
    loadMask: true
    });

    // make the grid resizable, do before render for better performance
    var rz = new Ext.Resizable('topic-grid', {
    wrap:true,
    minHeight:100,
    pinned:true,
    handles: 's'
    });
    rz.on('resize', grid.autoSize, grid);

    // render it
    grid.render();

    var gridHead = grid.getView().getHeaderPanel(true);
    var tb = new Ext.Toolbar(gridHead);


    var search1 = new GridSearch({
    tb: tb,
    ds: ds,
    cm: cm,
    serverSearch: true,
    quickSearch: true,
    multipleServerSearch: true,
    multipleQuickSearch: false,
    serverSearchText: 'B
    Attached Images

  5. #5
    Ext User kei's Avatar
    Join Date
    Jun 2007
    Location
    Lala Land
    Posts
    25
    Vote Rating
    0
    kei is on a distinguished road

      0  

    Default


    Oh, I did notice that too and many other hardcoded stuff inside.
    Apparently, the reason for that small text is simply an incorrect, if not appropriate, class.

    See lines 53 and 168 of GridSearch.js.
    PHP Code:
    cls'x-btn-icon'// replace with 'x-btn-text-icon' or 'x-btn-text' 

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    96
    Vote Rating
    0
    vibez is on a distinguished road

      0  

    Default


    Thanks kei I did notice a lot of hard coded stuff too.

  7. #7
    Ext User
    Join Date
    Jul 2007
    Posts
    9
    Vote Rating
    0
    ashishgandhi is on a distinguished road

      0  

    Default bug????

    bug????


    great work guys...

    but i was struggling with one problem is when user click on clear search the textfield got clear but the checkitem in the menu is not getting clear....i want that when user clicks on clear search the menu checkitem should have been clear too.....


    plz help me if u have some solution

  8. #8
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    I don

  9. #9
    Ext User dismay's Avatar
    Join Date
    Sep 2007
    Posts
    4
    Vote Rating
    0
    dismay is on a distinguished road

      0  

    Default


    Hi galdaka!

    Thanks for your GridSearch but I found a bug, maybe..

    lets make some changes:
    HistoryClearableComboBox.js
    ..
    onTrigger2Click : function() {alert('test1'); this.reset()},
    ..
    GridSearch.js::QuickSearch
    ...
    this.searchBox.onTrigger2Click = function(){
    alert('test2');
    searchBox.setValue('');
    searchBox.setRawValue(searchBox.emptyText);
    searchBox.el.addClass(searchBox.emptyClass);
    searchBox.disabled = true;
    ds.clearFilter();
    };

    make demo page by vibez and click on trigger button in QuickSearch and see alert('test1');

    why? help me please

  10. #10
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by dismay View Post
    Hi galdaka!

    Thanks for your GridSearch but I found a bug, maybe..

    lets make some changes:
    HistoryClearableComboBox.js
    ..
    onTrigger2Click : function() {alert('test1'); this.reset()},
    ..
    GridSearch.js::QuickSearch
    ...
    this.searchBox.onTrigger2Click = function(){
    alert('test2');
    searchBox.setValue('');
    searchBox.setRawValue(searchBox.emptyText);
    searchBox.el.addClass(searchBox.emptyClass);
    searchBox.disabled = true;
    ds.clearFilter();
    };

    make demo page by vibez and click on trigger button in QuickSearch and see alert('test1');

    why? help me please
    Remove alert

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar