下一个代码无法正常工作，我的gridpanel无法渲染确定：
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]
}]
}]
});});
但是下一个代码可以工作：
{
region:'center',
margins:'35 5 5 0',
layout:'fit',
autoScroll:true,
items: [App.ui.adduser, App.ui.grid]
}
为什么呢？我刚刚用一个面板包装App.ui.grid，为什么它无法呈现数据？谢谢你的帮助!!!
答案 0 :(得分：1)
Layout:'fit'适用于单个子面板，但您要将两个子面板添加为列，因此我假设您需要layout:'column'？您的包含App.ui.adduser的列面板也没有指定任何布局，这也可能导致问题。