PDA

View Full Version : grouping grid in card wizard



alienwebz
12 Jan 2010, 3:44 PM
I cannot seem to get my grouping grid to work, now the wizard will not even show.


var reader = new Ext.data.JsonReader({
root: 'rows',
fields: [
{name: 'company'},
{name: 'industry'}
]
});


Ext.ns('Example');

// example grid
var examplegrid = new Ext.grid.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
url: 'get-grid-data.php',
groupField:'industry'
}),
columns: [
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
],
view: new Ext.grid.GroupingView({
forceFit:true
})
});


Ext.BLANK_IMAGE_URL = 'ext3/resources/images/default/s.gif';

Ext.onReady(function(){

Ext.QuickTips.init();

var wizard = new Ext.ux.Wiz({

title : 'Wizard',

headerConfig : {
title : 'Welcome to the Wizard'
},

cardPanelConfig : {
defaults : {
baseCls : 'x-small-editor',
bodyStyle : 'padding:40px 15px 5px 120px;background-color:#F6F6F6;',
border : false
}
},

cards : [

// first card with welcome message
new Ext.ux.Wiz.Card({
title : 'Welcome',
monitorValid : true,
items : [{
border : false,
bodyStyle : 'background:none;',
html : 'Welcome to the Wizard!<br /><br /> '+
'This Installer will guide you through the process of configuring<br /> '+
'your wizard for first-time use.<br/><br/>'+
'Please click the "Next" button to continue.'
}]
}),

// second card with pre-install check
new Ext.ux.Wiz.Card({
title : 'Pre-Install System Check',
monitorValid : true,
defaults : {
labelStyle : 'font-size:11px'
},
items : [{
border : false,
bodyStyle : 'background:none;padding-bottom:30px;',
html : 'Please ensure that your system has the minimum requirements before you attempt to continue.'
}
,{
xtype:'examplegrid',
}]
}),

// third card with input field email-address
new Ext.ux.Wiz.Card({
title : 'Your email-address',
monitorValid : true,
defaults : {
labelStyle : 'font-size:11px'
},
items : [{
border : false,
bodyStyle : 'background:none;padding-bottom:30px;',
html : ' Please enter your email-address.'
},
new Ext.form.TextField({
name : 'email',
fieldLabel : 'Email-Address',
allowBlank : false,
vtype : 'email'
})
]
}),

// fourth card with finish-message
new Ext.ux.Wiz.Card({
title : 'Finished!',
monitorValid : true,
items : [{
border : false,
bodyStyle : 'background:none;',
html : 'Thank you for testing this wizard. Your data has been collected '+
'and can be accessed via a call to <pre><code>this.getWizardData</code></pre>'+
'When you click on the "finish"-button, the "finish"-event will be fired.<br/>'+
'If no attached listener for this event returns "false", this dialog will be '+
'closed. <br />(In this case, our listener will return false after a popup shows the data you just entered)'
}]
})


]
});

// show the wizard
wizard.show();
wizard.cards[0].show();
});


Any ideas?

alienwebz
13 Jan 2010, 8:47 PM
what no love from the community?