PDA

View Full Version : trouble with layout



Unkind
15 Aug 2012, 12:03 AM
this is code and link on screenshot

Ext.define('SD.view.SDDetail', {
extend: 'Ext.window.Window',
alias: 'widget.sddetail',
title: "???????? ??????",
height: 620,
width: 850,
layout: 'fit',
border: false,
modal: true,
isDemandReadOnly: false,
changeStatusOnly: false,

initComponent: function () {
var me = this;
var user = TR.user;

var f = new Ext.form.FormPanel({
xtype: 'form',
labelWidth: 60
, frame: true
, items: [{
fieldLabel: 'Text'
, xtype: 'textfield'
, anchor: '-18'
}, {
layout: 'column'
, defaults: {
columnWidth: 0.5
//, layout: 'form'
, border: false
, xtype: 'panel'
, bodyStyle: 'padding:0 18px 0 0'
}
, items: [{
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 1'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'datefield'
, fieldLabel: 'Date'
}]
}, {
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 2'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'timefield'
, fieldLabel: 'Time'
}]
}]
}, {
fieldLabel: 'Text Area'
, xtype: 'textarea'
, anchor: '-18 -80'
}]
});

this.items = [f];

this.tbar = {
xtype: 'toolbar',
height: 27,
items: [
{
xtype: "tbspacer"
}, "-", {
xtype: "tbspacer"
},
{
text: "????????????? ?????",
icon: "Content/images/btnAttach.gif",
disabled: true,
handler: function (btn, e) { ShowAttachments(r.id, true, me.isDemandReadOnly); }
}, "-", {
xtype: "tbspacer"
}, {
text: "??????? ????????",
icon: "Content/images/btnHistory.gif",
disabled: true,
handler: function (btn, e) { ShowStatusesHistory(r.id, true); }
}, "-", {
xtype: "tbspacer"
}, {
text: "?????????? ?? ???????????????? ????????",
icon: "Content/images/btnComplect.gif",
disabled: true,
handler: function (btn, e) { ShowComponents(r.id, true, me.isDemandReadOnly); }
}, "-", {
icon: "Content/images/btnPrint.gif",
text: "???????????????? ???????? ???????",
disabled: true,
handler: function (btn, e) { DemandCardForm(r.id); }
}

]
};

this.buttons = [
{
text: "?????????",
action: 'save'
, disabled: me.isDemandReadOnly || user.SdUserViewOnly
}, {
xtype: "button",
text: "??????",
handler: function (btn, e) {
me.close();
}
}
];

// me.on('show', function () {
// me.down('kontragentcombo').focus(false, 250);
// });

me.callParent(arguments);
}

http://s002.radikal.ru/i198/1208/e2/7a153ca9b116.jpg

when i uncomment layout: 'form' i have error

namespace is undefined


chrome://firebug/content/blank.gif

if (namespace === from || namespace.substring(0, from.length) === from) {



i whant this http://i032.radikal.ru/1208/51/e9b8ba1c1f30.jpg

but have error, what i must do?

redraid
15 Aug 2012, 2:01 AM
See http://docs.sencha.com/ext-js/4-1/#!/guide/layouts_and_containers to understand layout mechanism


Ext.define('SD.view.SDDetail', {
extend: 'Ext.window.Window',
alias: 'widget.sddetail',
title: "???????? ??????",
height: 620,
width: 850,
layout: 'fit',
border: false,
modal: true,
isDemandReadOnly: false,
changeStatusOnly: false,

initComponent: function () {
var me = this;
// var user = TR.user;

me.items = [
{
xtype: 'form',
labelWidth: 60,
frame: true,
bodyPadding: 5,
layout: {
type: 'vbox',
align: 'stretch'
},
fieldDefaults: {
labelAlign: 'left'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Text'
},
{
xtype: 'container',

// Uncomment me =)
// xtype: 'fieldset',
// title: 'Date&time',
// collapsible: true,

layout: 'hbox',
items: [
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
items: [
{
xtype: 'combobox',
fieldLabel: 'Combo 1',
store: ['Item 1', 'Item 2']
},
{
xtype: 'datefield',
fieldLabel: 'Date'
}
]
},
{ xtype: 'splitter' },
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
items: [
{
xtype: 'combobox',
fieldLabel: 'Combo 2',
store: ['Item 1', 'Item 2']
},
{
xtype: 'datefield',
fieldLabel: 'Time'
}
]
}
]
},
{
xtype: 'textarea',
fieldLabel: 'Text Area',
flex: 1
}
]
}
];

me.tbar = {
height:27,
items:[
{
xtype:"tbspacer"
},
"-",
{
xtype:"tbspacer"
},
{
text:"????????????? ?????",
icon:"Content/images/btnAttach.gif",
disabled:true,
handler:function (btn, e) {
ShowAttachments(r.id, true, me.isDemandReadOnly);
}
},
"-",
{
xtype:"tbspacer"
},
{
text:"??????? ????????",
icon:"Content/images/btnHistory.gif",
disabled:true,
handler:function (btn, e) {
ShowStatusesHistory(r.id, true);
}
},
"-",
{
xtype:"tbspacer"
},
{
text:"?????????? ?? ???????????????? ????????",
icon:"Content/images/btnComplect.gif",
disabled:true,
handler:function (btn, e) {
ShowComponents(r.id, true, me.isDemandReadOnly);
}
},
"-",
{
icon:"Content/images/btnPrint.gif",
text:"???????????????? ???????? ???????",
disabled:true,
handler:function (btn, e) {
DemandCardForm(r.id);
}
}

]
};

me.buttons = [
{
text:"?????????",
action:'save'
// , disabled: me.isDemandReadOnly || user.SdUserViewOnly
},
{
text:"??????",
scope: me,
handler: me.close
}
];

me.callParent(arguments);
}
});

//wbr

scottmartin
15 Aug 2012, 10:48 AM
It may also be helpful for you to download Sencha Architect and to design your layouts and see how layouts works. The code is generated for you.

Scott.