How To Remove Border From Fieldset

Posted By Vitaliy | April 22, 2012 | ExtJS 4.0.7
0 3745
Reply to thread

Js Code

Ext.widget('form', {
	title: 'Test Form',
	width: 300,
	bodyPadding: 5,
	items:{
		xtype: 'fieldset',
		columnWidth: 0.5,
		title: 'Test Fieldset',
		collapsible: true,
		style: 'border: none; padding-top: 5px',
		defaultType: 'textfield',
		defaults: { anchor: '100%' },
		layout: 'anchor',
		items: [{
			fieldLabel: 'Field 1',
			name: 'field1'
		}, {
			fieldLabel: 'Field 2',
			name: 'field2'
		}],
	},
	renderTo: Ext.getBody()
});
            

Dynamic Fieldset Add/Remove

Posted By Vitaliy | March 17, 2012 | ExtJS 4.0.7
0 4027
Reply ro thread

Js Code

Ext.create('Ext.form.Panel', {
	title: 'Form with Dynamic FieldSets',
	bodyPadding: 10,
	width: 550,
        height: 300,
	autoScroll: true,
	renderTo: Ext.getBody(),
	tbar: [
		{
			text: 'Add FiŽŸeldSet',
			handler: function () {
				this.up('form').add(Ext.widget('closablefieldset', {
					columnWidth: 0.5,
					title: 'Test Fieldset',
					collapsible: true,
					defaultType: 'textfield',
					defaults: { anchor: '100%' },
					layout: 'anchor',
					items: [
						{
							fieldLabel: 'Field 1',
							name: 'field1'
						},
						{
							fieldLabel: 'Field 2',
							name: 'field2'
						}
					]
				}));
			}
		}
	],
	items: [
		{
			xtype: 'closablefieldset',
			columnWidth: 0.5,
			title: 'Test Fieldset',
			collapsible: true,
			defaultType: 'textfield',
			defaults: { anchor: '100%' },
			layout: 'anchor',
			items: [
				{
					fieldLabel: 'Field 1',
					name: 'field1'
				},
				{
					fieldLabel: 'Field 2',
					name: 'field2'
				}
			]
		}
	]
});
            

ExtJS 4.0.7 Closable FieldSet

Posted By Vitaliy | March 16, 2012 | ExtJS 4.0.7
0 2696

Js Code

Ext.define('Ext.form.ClosableFieldSet', {
	extend: 'Ext.form.FieldSet',
	alias: 'widget.closablefieldset',
	initLegend: function () {
		var me = this;
		me.callParent(arguments);
		if (!me.legend.closable) {
			me.legend.insert(1, Ext.widget('tool', {
				type: 'close',
				handler: me.onCloseClick,
				scope: me
			}));
			me.legend.closable = true;
		}
	},
	onCloseClick: function () {
		if (this.ownerCt) {
			this.ownerCt.remove(this, true);
		}
	}
});
            

Fit Grids In TabPanel

Posted By Vitaliy | March 15, 2012 | ExtJS 4.0.7
0 2323
Reply to thread

Js Code

Ext.define('CoolWindow', {
	extend: 'Ext.window.Window',
	alias: 'widget.coolwindow',
	width: 600,
	height: 500,
	maximizable: true,
	layout: 'border',
	items: [
		{
			xtype: 'contactinfo',
			region: 'north'
		},
		{
			xtype: 'tabpanel',
			tabBar: {
				plain: true
			},
			region: 'center',
			items: [
				{
					title: 'Tab 1',
					xtype: 'datagrid'
				},
				{
					title: 'Tab 2',
					xtype: 'datagrid'
				}
			]
		}
	],
	buttons: [
		{ text: 'Close', handler: function () { this.up('window').close() } }
	]
});