Results 1 to 9 of 9

Thread: the reconfigure method of the GridPanel.

  1. #1

    Default the reconfigure method of the GridPanel.

    In my application I want to make several GridPanel, and then put them to a TabPanel,however

    Someone told me that if too many GridPanels are displayed in on web page, it will cause a Performance problem,the response of the page maybe go to slow.

    So I tried to use just one GridPanel instance:

    Code:
    var store1=new Ext.data.JsonStore(.....);
    var colM1=new Ext.grid.columnModel(....);
    
    
    var store2=new Ext.data.JsonStore(.....);
    var colM2=new Ext.grid.columnModel(....);
    
    
    var commonGridPanel=new Ext.grid.GridPanel({store:store1,cl:colM1,viewConfig: {forceFit: true}});
    
    var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 0,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
                id:1,
                title: 'Tab01',
                listeners: {activate: handleActivate}
            },{
                id:2,
                title: 'Tab02',
                listeners: {activate: handleActivate}
            },
    //Here I have tried this:items[commonGridPanel,commonGridPanel,commonGridPanel],but it doesnot work.
        ]
    });
    
    function handleActivate(tab){
        tab.removeAll();
        var id=tab.getid();
        if(id==1){
            commonGridPanel.reconfigure(store1,colM1);
        } else if(id==2){
                commonGridPanel.reconfigure(store2,colM2);
        }
        tab.add(commonGridPanel);
        tab.doLayout();
    }

    So I wonder if this is a good manner?

    Also I meet some problems when using this manner:

    1)From the api I know "certain existing settings may become invalidated",so the view config:forceFit=true does not work when the first time I open the page.
    That's to say how to reset the gridveiw after call the reconfigure method of the GridPanel?

    2)When I click the tabs of the TabPanel,my page will scrolled to top automaticly,since I found that the link of the tab title is "http://host:port/path/#",so I wonder if this is the reason?

    3)The size of the GridPanel and its parent---the TabPanel.

    Right now, I set them with the same size,however what's going on is that there are two scroll bars at the sametime,one for the gridPanel, and one for the TabPanel,
    so is there a good manner to set the size of each? I just want the gridpanel fit for the TabPanel.
    I tried to set the "autoheight=true" for the gridPanel, if so,problem 2 will occur.

    Any ideas ,guys?

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

    Default

    Put the tabpanel and the grid together into a container, e.g.
    Code:
    var store1 = new Ext.data.ArrayStore({
        data: [
            [1, 'One'],
            [2, 'Two'],
            [3, 'Three']
        ],
        fields: ['value', 'text']
    });
    var colModel1 = new Ext.grid.ColumnModel({
        columns: [
            {header: 'Value', dataIndex: 'value'},
            {header: 'Text', dataIndex: 'text'}
        ]
    });
    var store2 = new Ext.data.ArrayStore({
        data: [
            ['Red', '#ff0000'],
            ['Green', '#00ff00'],
            ['Blue', '#0000ff']
        ],
        fields: ['color', 'value']
    });
    var colModel2 = new Ext.grid.ColumnModel({
        columns: [
            {header: 'Color', dataIndex: 'color'},
            {header: 'Value', dataIndex: 'value'}
        ]
    });
    
    var grid = new Ext.grid.GridPanel({
        flex: 1,
        store: [],
        columns: [],
        viewConfig: {forceFit: true}
    });
    
    var tabPanel = new Ext.TabPanel({
        height: 25,
        defaultType: 'box',
        items: [{
            title: 'Numbers',
            store: store1,
            colModel: colModel1
        },{
            title: 'Colors',
            store: store2,
            colModel: colModel2
        }],
        listeners: {
            tabchange: function(tp, p) {
                grid.reconfigure(p.store, p.colModel);
            }
        }
    });
    
    var container = new Ext.Container({
        layout: 'vbox',
        layoutConfig: {align: 'stretch'},
        width: 800,
        height: 200,
        items: [tabPanel, grid]
    }).render(Ext.getBody());

  3. #3

    Default

    Thanks for yor suggestion.
    Is there any problems in the codes you give me? I tried to run it ,however I got the errors. I have tried to check everything but can not make it work.
    This is the test.html I used :
    Code:
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>TTT</title>
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    
         <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="ext-all-debug.js"></script>
        <script type="text/javascript" src="test.js"></script>
    
    </head>
    <body>
    </body>
    </html>
    BTW, from your codes, it seems that , the TabPanel does not put the grid panel in its tabs,here we just use its tab event to change the gridpanel's store and something else. Isn't it?
    Also , in this coeds, three grdiPanel are created, two in the TabPanel,and one is created Explicitly,so go to my first question--- Using too many gird panel in one page will cause the preformence problem?

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

    Default

    1. Did you try my code inside Ext.onReady()?
    2. Which Ext version are you using?

  5. #5

    Default

    Quote Originally Posted by Condor View Post
    1. Did you try my code inside Ext.onReady()?
    Oh, my fault, I do not add them to the onready method,now it works. Thanks
    Quote Originally Posted by Condor View Post
    2. Which Ext version are you using?
    I am using ext3.2.1,.

    Well, I want to know how many gridpanel is created in the example? one or three?

    For example:

    Code:
    var tabPanel = new Ext.TabPanel({
       ......
      items: [{         
    title: 'Numbers',        
     store: store1,         
    colModel: colModel1     },{        
     title: 'Colors',        
     store: store2,         
    colModel: colModel2     }],});
    Does each item is a new created gridpanel?

    If not, how does this code work:
    Code:
        
    listeners: {         
    tabchange: function(tp, p) {
                 grid.reconfigure(p.store, p.colModel); 
            }     }
    If the p is not a grid, how to get its store and colModel.

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

    Default

    The tabs are just plain BoxComponents, so they don't really have 'store' and 'colModel' properties. I only put them there to know how to reconfigure the grid when a different tab is selected.

    (in the example 'p' is the current tab item = the boxcomponent in which I specified a store and colModel to use for the grid)

  7. #7

    Default

    Thanks, I got it . That's to say we can add extra configs to the components of ext, then use it .

    BTW, any way to change the default activate model(mouse click) of the tabpanel to mouse over?

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

    Default

    Quote Originally Posted by m4eclipse View Post
    BTW, any way to change the default activate model(mouse click) of the tabpanel to mouse over?
    Only by extending TabPanel to add a mouseover event handler on the strip.

  9. #9

    Default

    Maybe I mislead you. Not change the default model, just add the "mouse over" model, that's to say I can activate the tab by click or mouse over, so the only way is extending the tabpanel?
    Since extending the ext component is so difficult for me , I found no dos about extending about ext 3.2

Similar Threads

  1. Replies: 1
    Last Post: 10 Nov 2009, 12:00 AM
  2. GridPanel reconfigure store - how reconfigure plugin?
    By hadi78 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 29 Oct 2009, 5:55 AM
  3. Grid reconfigure method not working
    By qbert65536 in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 1 Sep 2009, 1:23 PM
  4. [Ext 2.0] GridPanel reconfigure incorrectly calls this.view.bind method
    By Ronaldo in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Sep 2007, 2:31 AM
  5. Grid reconfigure method
    By jeffiel in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 27 Mar 2007, 9:59 PM

Posting Permissions

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