|
|||||||
 |
|
|
Thread Tools |
|
#181
10-30-2009, 11:28 AM
|
|||
|
|||
Random rendering issues with Ext.ux.Wiz
Howdy all, what a brilliant UX this is!!
Has anyone experienced any of these two issues though? 1) I can add a grid or editorgrid quite nicely - but if I want a tbar or bbar it just doesn't display... Doesn't work on FF or IE. 2) Random columnness... a form with two columns. Displays fine in IE but not in FF(!) Here's the code for the card... seems pretty normal to me. The only way I can get the columns to display in FF is to open my firebug toolbar and close it again. It's only the stuff inside the columns that doesn't show.
new Ext.ux.Wiz.Card({
title: 'Mandatory Contact Information',
id: 'card-3',
defaults: {labelStyle : 'font-size:11px'},
items: [{
border : false,
bodyStyle : 'background:none; padding: 0 0 25px 0;',
html : 'We require an email address and contact address as part of Account Creation.<br/<br>Please be reassured that NES only contact you if there is a genuine business reason to do so and will <b>never</b> pass this information onto third parties.'
},{
//xtype: 'container',
layout: 'column',
width: 600,
border: false,
defaults: { columnWidth: '.5', border: false },
items: [{
bodyStyle: 'padding-right:5px;',
items: [{
layout: 'form',
border: false,
defaults: {labelStyle : 'font-size:11px'},
items: [{
xtype : 'textfield',
fieldLabel : 'Email Address',
allowBlank : false
}]
}]
},{
bodyStyle: 'padding-left:5px;',
items: [{
layout: 'form',
border: false,
defaults: {labelStyle : 'font-size:11px'},
items: [{
xtype : 'textfield',
fieldLabel : 'Mobile Phone',
allowBlank : false
}]
}]
}]
},{
border : false,
bodyStyle : 'background:none; padding: 25px 0 25px 0;',
html : 'We use postcode look-up software to ensure the address is valid; all you need to do is insert your postcode and select from the list returned to the screen.'
},{
//xtype: 'container',
layout: 'column',
width: 600,
border: false,
defaults: { columnWidth: '.5', border: false },
items: [{
bodyStyle: 'padding-right:5px;',
items: [{
layout: 'form',
border: false,
defaults: {labelStyle : 'font-size:11px'},
items: [{
xtype : 'textfield',
fieldLabel : 'Postcode',
allowBlank : false
},new Ext.Button({
text : 'Address Lookup',
icon : 'images/icons/gifs/find.gif',
xtype : 'button',
width : 75,
style : 'padding:5px 0px 25px 131px;'
})]
}]
},{
bodyStyle: 'padding-left:5px;',
items: [{
layout: 'form',
border: false,
defaults: {labelStyle : 'font-size:11px'},
items: [{
xtype : 'textfield',
fieldLabel : 'Address Line 1',
disabled : true
},{
xtype : 'textfield',
fieldLabel : 'Address Line 2',
disabled : true
},{
xtype : 'textfield',
fieldLabel : 'City',
disabled : true
},{
xtype : 'textfield',
fieldLabel : 'Postcode',
disabled : true
}]
}]
}]
},{
border : false,
bodyStyle : 'background:none; padding: 25px 0 0 0;',
html : 'The "Next" button remains disabled until an email address and valid address have been entered.'
}]
}),
|
|
#182
10-30-2009, 11:53 AM
|
|||
|
|||
|
Quote:
var directorateGrid = new Ext.grid.EditorGridPanel({
title : 'Your Professional Details',
store : professionStore,
clicksToEdit : 1,
height : 100,
width : 485,
forceFit : true,
tbar : [ new Ext.Button({
text: 'Add another Profession',
icon: 'images/icons/gifs/add.gif'
// etc.......
})
],
columns:[{
.....
.........
|
|
#183
11-05-2009, 04:16 AM
|
|||
|
|||
|
Thank you very much for this ux - really great!
A question: Is it possible, define somehow the cards with xtype? So far I can see, currently isn't possible and I tried it with Ext.Reg(....) but somehow it look like that the current handling can't work if an card is defined with xtype.
|
|
#184
11-05-2009, 05:45 AM
|
|||
|
|||
|
Okay ... my current result:
--- Ext.UX.Wiz.Card.js.ORIG 2009-11-05 11:37:56.000000000 +0100
+++ Ext.UX.Wiz.Card.js 2009-11-05 11:38:11.000000000 +0100
@@ -145,3 +145,5 @@
}
});
+
+Ext.reg('wizardcard', Ext.ux.Wiz.Card);
var cards = this.cards;
for (var i = 0, len = cards.length; i < len; i++) {
cards[i].on('show', this.onCardShow, this);
cards[i].on('hide', this.onCardHide, this);
cards[i].on('clientvalidation', this.onClientValidation, this);
}
Quote:
var winHandler = new Ext.ux.Wiz({
id : 'content',
title : 'This is an window',
height : 480,
width : 640,
headerConfig : {
title : ''
},
cardPanelConfig : {
defaults : {
baseCls : 'x-small-editor',
bodyStyle : 'overflow:auto;',
border : false
}
},
cards: [{
xtype: 'wizardcard',
title: 'test1',
items: [{
border: false,
html: 'aaaa'
}]
}]
});
winHandler.show();
|
|
#185
11-10-2009, 01:28 PM
|
|||
|
|||
|
contents of the card are not rendered under the column layout
First of all, great extension, very useful.
And second, I've got a problem when rendering the contents of a card under the "column" layout. It seems to be the same problem as swarm. I'm using Extjs 3.0.0. In FF3.5 the contents of the card will only be rendered after I minimize firebug or change tab or maximize firebug, ... otherwise nothing will appear. In IE8, nothing happens, no content at all. If I add the "forceLayout : true" property to the card, the contents are rendered but they are all broken. (see pics attached) Here is an example: (It's basically the SimpleWizard.html code with the card causing me trouble) Ext.onReady(function(){
Ext.QuickTips.init();
var wizard = new Ext.ux.Wiz({
title : 'A simple example for a wizard',
headerConfig : {
title : 'Simple Wizard Example'
},
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',
items : [{
border : false,
bodyStyle : 'background:none;',
html : 'Welcome to the example for <strong>Ext.ux.Wiz</string>, '+
'a Ext JS user extension for creating wizards.<br/><br/>'+
'Please click the "next"-button and fill out all form values.'
}]
}),
new Ext.ux.Wiz.Card({
title : 'Create a new schedule',
id:'cd_create_schedule_id',
name: 'cd_create_schedule',
defaults : {
labelStyle : 'font-size:11px; width:60px;',
cls:'x-fieldset-custom',
forceLayout : true,
border: false
},
items : [{
html: '<b>Create a new schedule</b>' ,
border : false,
bodyStyle : 'background:none;',
padding : '0 10px 10px 0px'
},{
xtype:'fieldset',
layout:'form',
defaults : {
cls:'x-fieldset-custom',
border: false,
labelWidth: 60
},
items:[{
// column layout with 2 columns
xtype:'fieldset',
layout:'column' ,
defaults:{
columnWidth:0.5 ,
layout:'form',
bodyStyle:'padding:0 18px 0 0;',
border: false
},
items:[{
// left column
xtype:'fieldset',
defaults:{anchor:'100%' , border: false},
items:[{
xtype: 'timefield',
fieldLabel: 'Starting',
name: 'starting_tab'
},{
xtype: 'timefield',
fieldLabel: 'Ending',
name: 'ending_tab'
}]
},{
// right column
xtype:'fieldset',
defaults:{anchor:'100%'},
items:[{
xtype: 'checkbox',
checked: true,
hideLabel: true,
// labelSeparator: ' ',
boxLabel: 'Kill Jobs at end',
ctCls : 'x-wizard-label-size',
name: 'endTask'
}]
}]
},{
xtype: 'fieldset',
layout:'column',
items:[{
layout:'form',
columnWidth: 0.3,
xtype: 'radio',
boxLabel: 'Run Only',
name: 'rb-custwidth_1',
checked: false,
listeners:{
'check' : function(comp, checked){
if (checked == true){
Ext.getCmp('run_only_text_id').setDisabled( false );
Ext.getCmp('run_only_label_id').setDisabled( false );
} else {
// Clear the data
Ext.getCmp('run_only_text_id').setRawValue('');
// Disable the components
Ext.getCmp('run_only_text_id').setDisabled( true );
Ext.getCmp('run_only_label_id').setDisabled( true );
}
}
}
},{
layout:'form',
columnWidth: 0.3,
xtype: 'textfield',
id:'run_only_text_id',
hideLabel: true,
disabled: true
},{
layout:'form',
columnWidth: 0.4,
xtype: 'label',
id:'run_only_label_id',
style: 'margin-left:5px;',
text: 'times',
disabled: true
}]
}]
}]
}),
// 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();
});
|
|
#186
11-11-2009, 05:39 AM
|
|||
|
|||
|
@ udalaitz
Try a doLayout() - That seemed to work nicely for me... Also double check that you're not over nesting - I was 
|
|
#187
11-11-2009, 05:55 AM
|
|||
|
|||
|
[solved] contents of the card are not rendered under the column layout
Thanks swarm, it's working now.
I also found that without adding "doLayout()" , if I change the layout in Wizard.js from: line 368: Ext.apply(cardPanelConfig, {
layout : new Ext.ux.layout.CardLayout(),
items : cards
});
Ext.apply(cardPanelConfig, {
layout : 'card',
items : cards
});
I prefer your solution because I don't totally understand mine. I looked at the Ext.ux.layout.CardLayout.js file and I don't see the problem. The weird thing is that the wizard seems to work fine too without this extension.
|
|
#188
11-11-2009, 12:11 PM
|
|||
|
|||
|
I'm not completely sure but I believe that is because ExtJS 3.x has a card layout now, the wizard extentsion was originally written in Extjs 2.x.
|
|
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
|
All times are GMT -5. The time now is 12:10 AM.
