1. #1
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default Ext Table full of GridPanels?

    Ext Table full of GridPanels?


    Looking for some recommendations on the best method for doing the following:

    The backend guys are building me an API call that will produce an object containing a bunch of logging categories, grouped into modules. My dummy object I've built to use in the mean time looks kinda like this:

    Code:
    var logCategoryObj = {
       modules: [
          {
             name: 'Asset Logger',
             categories: [
                {
                   name: 'Alpha',
                   enabled: true
                },{
                   name: 'Bravo',
                   enabled: false
                },{
                   name: 'Charlie',
                   enabled: true
                }
             ]
          },{
             name: 'Calendar Logger',
             categories: [
                {
                   name: 'Delta',
                   enabled: true
                },{
                   name: 'Echo',
                   enabled: false
                },{
                   name: 'Foxtrot',
                   enabled: true
                }
             ]
          }
       ]
    }
     
    etc, etc, etc...
    Originally I had been just using JavaScript to build a standard HTML table with 3 columns, with each cell containing both the module name (with checkAll/uncheckAll checkbox) and its corresponding list of categories (each with individual checkboxes). As I get deeper into it, I'm finding that maybe using an Ext Panel with a table layout and placing a GridPanel in each 'cell' would be better.

    I've spent a few hours tinkering with the GridPanel this morning already, including looking through the examples that come with the Ext package, but so far I can't seem to get it to play nice within my table layout Panel. Here's the code:

    Code:
    var modArray = []
     
    for(i=0;i<logCategoryObj.modules.length;i++){
       modArray[i] = new Ext.grid.GridPanel({
          baseCls: 'x-plain',
          width: 200,
          height: 200,
          colModel: new Ext.grid.ColumnModel([
             {header: 'Column1'},
             {header: 'Column2'}
          ])
       });
    }
     
    var logTbl = new Ext.Panel({
       baseCls: 'x-plain',
       layout: 'table',
       defaults: {
          bodyStyle: 'padding:10px'
       },
       layoutConfig: {
          columns: 3
       },
       items: modArray,
       renderTo: Application.contDocBody.dom
    });
    With the above code, on load I get the lovely "Undefined is null or not an object" error message, and it traces back to my "new Ext.grid.GridPanel(...)" block of code. Am I overlooking some required config in the GridPanel? I feel like I've looked over the documentation and examples really well, but can't seem to figure it out.

  2. #2
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default


    Went to lunch and came back hoping that a fresh look at it would let me find my mistake, but I'm still having no luck. As a side note, based on my description of my task above, would you fine folks even go at this in the same way, or is an Ext table full of GridPanels an intrinsically flawed idea?

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    What do you plan to have in each grid?

  4. #4
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default


    Each grid would eventually contain a reasonable list of categories (each with a checkbox to enable/disable), as well as a header of some sort with the module name (see the "dummy object" in the original post). The checkbox for the module name would be a "checkAll/uncheckAll" item.

  5. #5
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default


    I suppose the first thing I need to address is the second block of code in my original post, and any syntax error that it may contain. When running that, the app bombs out with the error " Line: 30638 Error: 'undefined' is null or not an object ". The line number is referring to this portion of code in ext-all-debug.js:

    Code:
    if(ds.getCount() < 1){
       return "";
    }
    Am I not sending it something it needs in order to render the GridPanel properly?

  6. #6
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    a grid needs a store (store = datasource/datastore = ds).

    Sounds like you may want a property grid if you just want 2 columns.

  7. #7
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default


    Ah, I had overlooked the '(required)' text on the documentation for the store config option of the GridPanel. Thank you.

    I had overlooked the PropertyGrid entirely as well. That certainly looks like more what I'm doing. I'll dive into that now. Thanks again!

  8. #8
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default


    Three more questions for you fine folks. I've looked over several threads on the topic of width within a table layout panel, but I'm still having a little trouble understanding. As can be seen in the code below, my 'table' has 3 columns. My hope is to have each GridPanel 'cell' fill 1/3rd-ish of the horizontal space available, with a few pixels of cellspacing between each 'cell' in all directions. I'd like each GridPanel to be vertically aligned within its cell, and its height to be set based on the number of items in the panel, so as to not need a scrollbar on each.

    The items I'm struggling with are the width, the vertical scrollbar, and the vertical alignment. I've played with the 'fit' layout, as well as attempting to set the width using a % value in an attached css, both with unexpected and seizure-inducing results. Additionally, each GridPanel seems to want to size itself exactly one pixel too small for its

    Below is the code as it exists now, with a fixed width set for each 'cell' so that I don't nuke the app too badly on load. My two questions (sorry for rambling a bit first, but I wanted to be clear on what I'm trying to do) are:

    - What is the best method for forcing the table 'cells' to size themselves to 33ish% of the full table width?

    - What is the best method for preventing the vertical scrollbar from showing up in each GridPanel 'cell'?

    - What is the best method for vertically aligning each GridPanel within its 'cell'?

    Existing code:

    Code:
    var modArray = []
    for(i=0;i<logCategoryObj.modules.length;i++){
       var reader = new Ext.data.ArrayReader({}, [
          {name: 'category'}
       ]);
     
       var catSelModel = new Ext.grid.CheckboxSelectionModel();
     
       Ext.grid.catArray = []
     
       for(j=0;j<logCategoryObj.modules[i].categories.length;j++) {
          Ext.grid.catArray[j] = [
             [logCategoryObj.modules[i].categories[j].name]
          ]
       }
     
       modArray[i] = new Ext.grid.GridPanel({
          enableHdMenu: false,
          store: new Ext.data.Store({
             data: Ext.grid.catArray,
             reader: reader
          }),
          selModel: catSelModel,
          colModel: new Ext.grid.ColumnModel([
             catSelModel,
             {id:'category', header: logCategoryObj.modules[i].name, width: 240, sortable: false, dataIndex: 'category'}
          ])
       });
    }
     
    var logTbl = new Ext.Panel({
       layout: 'table',
       defaults: {
          bodyStyle:'width:400; vertical-align:top'
       },
       layoutConfig: {
          columns: 3
       },
       items: modArray,
       renderTo: Application.contDocBody.dom
    });

  9. #9
    Sencha User rothaar's Avatar
    Join Date
    Jul 2008
    Posts
    64
    Vote Rating
    0
    rothaar is on a distinguished road

      0  

    Default


    EDIT:

    What is the best method for preventing the vertical scrollbar from showing up in each GridPanel 'cell'?
    This portion is resolved. Not sure how I overlooked the autoHeight:true option previously. The other two issues remain.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    I'd study the layout browser and other similar examples. I suspect you'll need a width 0.33 and some padding or margins. I think the layout browser shows these.

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