1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    67
    Vote Rating
    1
    rao is on a distinguished road

      1  

    Default Accordion - Dynamically expand/collapse ?

    Accordion - Dynamically expand/collapse ?


    Hi

    How to expand / collapse the Accordion panel dynamically . Reference is https://extjs.com/forum/showthread.php?p=202881.

    Can any provide example for using searchfield plugin with Accordion items. I want to search the content of Accordion items based on the search field criteria.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,127
    Vote Rating
    516
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Just call expand/collapse the child panels for the container accordion.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Aug 2008
    Posts
    67
    Vote Rating
    1
    rao is on a distinguished road

      0  

    Default


    Thanx for ur reply . Already I have done it. I have an Accordion panel with child items as Treepanels (A-E, F-G ,.... 0-9) as shown in the code. When the user enters 'a%', then I want to expand 'A-E' treepanel. By default all items are collapsed. After entering 'a%' and onclick of search trigger, I want to expand 'A-E' item in Accordion.

    I tried with the following code. but I didn't succeed .... please help after seeing the code

    Code:
    var buildAccordianPanel = function(treePanelAtoE)
    {
     westRegionPanel = new Ext.Panel({  
      region:'west',
      tbar: [
       'Search Node: ', ' ',
        new Ext.app.SearchField({
        width:80
        }),'-',
       
       {
        text: 'Clear',
        handler:clearSearchNodeField
       }
       
      ],
      title:'Node List',
      split:true,
      id: 'westPanel',
      layout:'accordion',
      width: 200,
      minSize: 150,
      maxSize: 200,   
      collapsed :false,
      collapsible: true,
      layoutConfig:{ animate:true},
      listeners : {collapse: deleteHostTab },
      defaults: {           
               // bodyStyle: 'padding:5px',
                collapsed: true            
            },
      items: [
        {
          title: 'A-E',
          id:'A-E',
          layout:'fit',
          collapsed: true,
                   listeners: {
          expand : loadTree,
          collapse: removeTree }
        },
            
        //treePanelAtoE,    
          {
          title: 'F-J',               
          layout:'fit',
                   listeners: {
          expand : loadTree,
          collapse: removeTree }
        },
                 {
          title: 'K-O',
          layout:'fit',
                   listeners: {
          expand : loadTree,
          collapse: removeTree }
        },
                 {
          title: 'P-T',
          layout:'fit',
                   listeners: {
          expand : loadTree,
          collapse: removeTree }
        },
           {
          title: 'U-Z',
          layout:'fit',
                   listeners: {
          expand : loadTree,
          collapse: removeTree }
        },
                 {
          title: '0-9',
          layout:'fit',
                   listeners: {
          expand : loadTree,
          collapse: removeTree }
        }
               ]  
      
     }); 
    };
    var treePanelToLoad;
    var loadTree = function(p)
      {
     var strFromNode = p.title.substr(0,1);
     var strToNode =   p.title.substr(2,3);
     treePanelToLoad = buildTreePanel( p.title, strURL, strFromNode, strToNode); 
     p.add(treePanelToLoad);
     p.ownerCt.doLayout(); 
      };
    var removeTree = function (p){
     if(treePanelToLoad != null)
     {
       try{
        p.remove(treePanelToLoad);  
      }
       catch(e){}
     }
    };
     
    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,
     id:'searchNodeForm',
        validateOnBlur:false,
        trigger1Class:'x-form-clear-trigger',
        trigger2Class:'x-form-search-trigger',
        hideTrigger1:true,
        width:180,
        hasSearch : false,
        paramName : 'query',
        onTrigger2Click : searchNodeTrigger
    });
     
    function searchNodeTrigger(){
     var v = this.getRawValue();  
      if( v != "" && v.length > 0){
      alert('west Region :' +v); 
     
       if(v =="a"){ 
      Ext.get('A-E').dom.collapsed = false;
      
       }   
     }
    }

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,127
    Vote Rating
    516
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    'A-E' is a component, not a DOM element.

    Code:
    Ext.getCmp('A-E').collapse();
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    Aug 2008
    Posts
    67
    Vote Rating
    1
    rao is on a distinguished road

      0  

    Default


    With this code Ext.getCmp('A-E').expand(); .. Now I am able to expand the Accordian item and how to expand the items inside 'A-E' component.

    Currently 'A-E' contains tree with Structure as
    A with children as a1, a2..
    B with children as b1,b2 ....
    .
    .
    E with children as e1,e2,e3 ....

    so when the user enters 'b1' in serch field , I should expand the 'A-E' component with the tree 'B' as expanded and cursor should point to b1 ....

    how can I expand the items inside the component...

  6. #6
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    pathik is on a distinguished road

      0  

    Default Accordian

    Accordian


    i want my accordians to be expand upside down instead of downside up.
    Is that possible using extjs accordion layout or not ?

Thread Participants: 2

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