Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: load xtemplate in a panel on a click

  1. #1

    Default load xtemplate in a panel on a click

    hello,

    i'm new to use EXT and may be it's a simple problem but i test many things and nothing happened.
    like the title said, i have a problem to load a template in a panel by cliking on a tree node,
    I just want to load my template in the center div.
    first i have tree with node in my west div.
    I use something like that to call my panel but nothing happened.

    I load everything on the first load
    "center" is my var for center panel in a viewport.
    tree.js
    Code:
    Tree_Category.on('click',function(node,event){
            
            //udate center title
            var tab=node.id.split(".")
            var typeElt=tab[0];
            var numElt=tab[1];
            center.setTitle(typeElt+" : "+node.text);
            if(typeElt=="dossier"){
              //I try this but it don't work  
              projectViewDataRecord.load({params:{"typeElt":typeElt,"numElt":numElt}});
              center.add(projectView);
              center.doLayout();
                           
                
            }else if(typeElt=="fichier"){
           ...
            }
    with that code nothing happened,
    i try to use dataView to load my content but nothing happened to.
    projectview.js
    Code:
    var projectViewDataDisplay = new Ext.DataView({
        store: projectViewDataRecord,
        tpl: tplProjectView,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.divProjet'
       
        })
    
    
    var projetView = new Ext.Panel({
        id:'ProjetView',
        items:[projectViewDataDisplay],
        tbar:tbarProjectView
        
        
    });
    the toolbar is loaded but not the template.
    someone have an idea.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    You are adding projetView to center EVERY time you click on a node!

    Instead, make your center panel layout:'card' and put all possible panels in the items.

    Now you only have to select the matching card when you click on a node.

  3. #3

    Default

    ok I tried what you said like this,

    first i change the layout in my center panel like this,
    doc.js
    Code:
    var center = new Ext.Panel(
        {
            region: 'center',
               layout:'card',
            id:'center',
            el:'center-div',
            title: 'Dossier',
            headerAsText:true,
            autoDestroy:true
            
          }
    );
    then when i click on my treenode i add directly my dataview to the center panel.
    tree.js
    Code:
    if(typeElt=="dossier"){
                //projectViewDataRecord.load({params:{"typeElt":typeElt,"numElt":numElt}});
                center.add(projectViewDataDisplay);
                center.add(tbarProjectView);
                center.doLayout();
    obviously nothing is displayed.
    here is the declaration of projectViewDataDisplay
    projectview.js
    Code:
    //json store
    var projectViewDataRecord = new Ext.data.JsonStore({
        url:"../../include/php/getElement.php",
        root:"dataProjet",
        
        fields:[
            {name:"numProjetTest",type:"int"},
            {name:"nomProjetTest",type:"string"},
            {name:"commentaireProjetTest",type:"string"},
            {name:"numUrgenceProjetTest",type:"int"},
            {name:"numEtatProjetTest",type:"int"},
            {name:"numProjetTestParent",type:"int"},
            {name:"dateProjet",type:"date"}
             ]
    });
    
    //template
    var tplProjectView = new Ext.XTemplate(
    "<div id='divProjet'" +
        "<p><b>{nomProjetTest}</b></p>" +
        "<p><b>{commentaireProjetTest}</b></p>" +
    "</div>"
    );
    
    //dataview
    var projectViewDataDisplay = new Ext.DataView({
        store: projectViewDataRecord,
        tpl: tplProjectView,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.divProjet'
       
        });
    with what you said can you give me an example because actually i'm really lost.
    thanks in advance for your help

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    I meant:
    Code:
    var center = new Ext.Panel({
        region: 'center',
        layout:'card',
        id:'center',
        el:'center-div',
        title: 'Dossier',
        headerAsText:true,
        items: [projectViewDataDisplay, ...]
    );
    ...
    if(typeElt=="dossier"){
        center.layout.setActiveItem(projectViewDataDisplay);
        center.doLayout();

  5. #5

    Default

    ok, just one more ask,

    is there any solution to use add and remove items with my case ? because if i have many panel to manage it seems to be very difficult to manage it.
    loaded from other link like an other toolbar

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Yes, you can add and remove components to/from a container (you already seem to know that you need to call doLayout after adding a component).

    But remember that the container layout can sometimes be restrictive. You are probably using layout:'fit', which only supports ONE item, so you have to remove the previous panel before you can show a new one.
    Also note that there are other layouts (like border) that don't support adding or removing items.

  7. #7

    Default

    for example

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Maybe you should start with exactly describing what you want to do...

  9. #9

    Default


    ok,

    I change my center panel like this
    Code:
    var center = new Ext.Panel(
        {
            region: 'center',
               layout:'card',
            id:'center',
            el:'center-div',
            title: 'Dossier',
            autoDestroy:true
            
          }
    I change my click tree node like this.
    Code:
    Tree_Category.on('click',function(node,event){
            
            var tab=node.id.split(".")
            var typeElt=tab[0];
            var numElt=tab[1];
            if(typeElt=="dossier"){
                  center.removeAll();
                center.add(projetView);
                center.doLayout();
    
                           
                
            }
    ok tried what you said
    nothing is diplayed,
    i think the problem may comes from my var typeElt and numElt, because it's my paramaters to my dataview and i need to load these paramaters to display the different result, however nothing is load in my firebug when i click on a node.

    how can i load correctly these params to my dataview or my datastore. and display it to my center panel.

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    I don't see you loading the store anywhere.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •