tags:

views:

1269

answers:

1

Next code can not working, my gridpanel can not render ok:

    Ext.onReady(function(){

    Ext.namespace('App', 'App.ui', 'App.data');

    // Add the additional VTypes
 Ext.apply(Ext.form.VTypes, {

     password : function(val, field) {
         if (field.initialPassField) {
             var pwd = Ext.getCmp(field.initialPassField);
             return (val == pwd.getValue());
         }
         return true;
     },

     passwordText : 'Passwords do not match'
 });

    App.data.userstore = new Ext.data.DirectStore({
        autoLoad: true,
        directFn: ExtDirect.UserController.selectAll,
        paramsAsHash: true,
        idProperty: 'UserID',
        listeners: {
            load: function(s, records){
             //Ext.MessageBox.alert( "Information", "Loaded " +
             //records.length + " records");
            }
     },
        fields : [ 'UserID', 'UserLevelID', 'UserName', 'Password', 
                   'FirstName', 'LastName', 'Email', 'Skype', 
                   'OfficePhone', 'CellPhone', 'Position' ]
    })



    // row expander
    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<p><b>Company:</b> {company}</p><br>',
            '<p><b>Summary:</b> {desc}</p>'
        )
    });

    var sm = new Ext.grid.CheckboxSelectionModel();

 //Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
    App.userColumns = [
     {header: "UserID", width: 100, sortable: true, dataIndex: 'UserID'},
     {header: "UserLevelID", width: 100, sortable: true, dataIndex: 'UserLevelID', editor: new Ext.form.ComboBox({})},
     {header: "UserName", width: 100, sortable: true, dataIndex: 'UserName', editor: new Ext.form.TextField({})},
     {header: "Password", width: 100, sortable: true, dataIndex: 'Password'},
     {header: "FirstName", width: 100, sortable: true, dataIndex: 'FirstName', editor: new Ext.form.TextField({})},
     {header: "LastName", width: 100, sortable: true, dataIndex: 'LastName', editor: new Ext.form.TextField({})},
     {header: "Email", width: 100, sortable: true, dataIndex: 'Email', editor: new Ext.form.TextField({})},
     {header: "Skype", width: 100, sortable: true, dataIndex: 'Skype', editor: new Ext.form.TextField({})},
     {header: "OfficePhone", width: 100, sortable: true, dataIndex: 'OfficePhone', editor: new Ext.form.TextField({})},
     {header: "CellPhone", width: 100, sortable: true, dataIndex: 'CellPhone', editor: new Ext.form.TextField({})},
     {header: "Position", width: 100, sortable: true, dataIndex: 'Position', editor: new Ext.form.TextField({})}
 ];

 App.ui.editor = new Ext.ux.grid.RowEditor({
        saveText: 'Update'
    });

 // create the Grid
 App.ui.grid = new Ext.grid.GridPanel({
  store: App.data.userstore,
  columns: App.userColumns,
  stripeRows: true,
  plugins: [expander],
  layout: 'fit',
  height: 250,
  width: 500,
  title: 'DB Grid',
  sm: new Ext.grid.RowSelectionModel({
            singleSelect: true,
            listeners: {
                rowselect: function(sm, row, rec) {
                    Ext.getCmp("userformgrid-panel").getForm().loadRecord(rec);
                }
            }
        }),
        columnLines: true,
        frame: true,
        listeners: {
            viewready: function(g) {
                g.getSelectionModel().selectRow(0);
            } // Allow rows to be rendered.
        },

        // inline toolbars
        tbar:[{
            text:'Add Something',
            tooltip:'Add a new row',
            iconCls:'add'
        }, '-', {
            text:'Options',
            tooltip:'Blah blah blah blaht',
            iconCls:'option'
        },'-',{
            text:'Remove Something',
            tooltip:'Remove the selected item',
            iconCls:'remove',

            // Place a reference in the GridPanel
            ref: '../removeButton',
            disabled: true
        }],
 });

 App.data.userstore.load();

 App.ui.adduser = new Ext.FormPanel({
  id: 'adduser-panel',
     labelWidth: 75, // label settings here cascade unless overridden
     frame: true,
     title: 'Add a new user',
     bodyStyle:'padding:5px 5px 0',
     width: 350,

     items: [{
         xtype:'fieldset',
         checkboxToggle:false,
         title: 'Account Information',
         autoHeight:true,
         defaults: {width: 210},
         defaultType: 'textfield',
         collapsed: false,
         items :[{
                 fieldLabel: 'User Name',
                 name: 'username',
                 allowBlank:false
             },{
                 fieldLabel: 'Password',
                 name: 'password',
                 id: 'password',
                 allowBlank:false
             },{
                 fieldLabel: 'Confirm Password',
                 name: 'pass-cfrm',
                 id: 'pass-cfrm',
                 vtype: 'password',
                 initialPassField: 'password' // id of the initial password field
             }]
     }, {
         xtype:'fieldset',
         checkboxToggle:false,
         title: 'Personal Information',
         autoHeight:true,
         defaults: {width: 210},
         defaultType: 'textfield',
         collapsed: false,
         items :[{
                 fieldLabel: 'First Name',
                 name: 'firstname',
                 allowBlank:false
             },{
                 fieldLabel: 'Last Name',
                 name: 'lastname',
                 allowBlank: false
             }, {
                 fieldLabel: 'Email',
                 name: 'email',
                 vtype:'email',
                 allowBlank: false
             }
         ]
     },{
         xtype:'fieldset',
         title: 'Other',
         collapsible: true,
         autoHeight:true,
         collapsed: true,
         defaults: {width: 210},
         defaultType: 'textfield',
         items :[{ 
             fieldLabel:'Skype', 
             name:'skype'
         }, { 
             fieldLabel:'Office Phone', 
             name:'phone'
         }, { 
             fieldLabel:'Cell Phone', 
             name:'cellphone'
         }, { 
             fieldLabel:'Position', 
             name:'posion'
         }, { 
          xtype: 'fileuploadfield',
          emptyText: 'Select an image',
             fieldLabel:'Picture', 
             name:'picture',
             id: 'picture',
             buttonText: '',
             buttonCfg: {
                 iconCls: 'upload-icon'
             }
         }, { 
          xtype: 'textarea',
             fieldLabel:'Comment', 
             name:'comment',
             flex: 1  // Take up all *remaining* vertical space
         }]
     }],

     buttons: [{
         text: 'Submit'
     },{
         text: 'Clear'
     }]
 });

 var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            region:'west',
            id:'west-panel',
            title:'West',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins:'35 0 5 5',
            cmargins:'35 5 5 5',
            layout:'accordion',
            layoutConfig:{
                animate:true
            },
            items: [{
                html: Ext.example.shortBogusMarkup,
                title:'Navigation',
                autoScroll:true,
                border:false,
                iconCls:'nav'
            },{
                title:'Settings',
                html: Ext.example.shortBogusMarkup,
                border:false,
                autoScroll:true,
                iconCls:'settings'
            }]
        },{
            region:'center',
            margins:'35 5 5 0',
            layout:'fit',
            autoScroll:true,
            items: [{
                columnWidth:.4,
                baseCls:'x-plain',
                bodyStyle:'padding:5px 0 5px 5px',
                items:[App.ui.adduser]
            },{
                columnWidth:.60,
                layout: 'fit',
                baseCls:'x-plain',
                bodyStyle:'padding:5px',
                items:[App.ui.grid]
            }]
        }]
    });});

But next code can working:

{
        region:'center',
        margins:'35 5 5 0',
        layout:'fit',
        autoScroll:true,
        items: [App.ui.adduser, App.ui.grid]
}

Why? I just wrapped App.ui.grid with a panel, why it can not render the data? Thanks for any help!!!

+1  A: 

Layout:'fit' is intended for a single child panel, but you are adding two child panels as columns, so I assume you want layout:'column' instead? Also your column panel that contains App.ui.adduser does not have any layout specified, which could also cause problems.

bmoeskau