components.js

别人的 ext工具 大家可以研究一下很不错 需要大家继续完善

                    html:"Size *"
                  },{
                    html:"Title **"
                  },{
                    xtype:"checkbox",
										name:'active_1'
                  },{
                    xtype:"textfield",
                    maskRe:/[0-9%]/,
                    width:53,
										name:'size_1'
                  },{
                    xtype:"textfield",
										name:'title_1'
                  },{
                    xtype:"checkbox",
										name:'active_2'
                  },{
                    xtype:"textfield",
                    maskRe:/[0-9.%]/,
                    width:53,
										name:'size_2'
                  },{
                    xtype:"textfield",
										name:'title_2'
                  },{
                    xtype:"checkbox",
										name:'active_3'
                  },{
                    xtype:"textfield",
                    maskRe:/[0-9.%]/,
                    width:53,
										name:'size_3'
                  },{
                    xtype:"textfield",
										name:'title_3'
                  },{
                    xtype:"checkbox",
										name:'active_4'
                  },{
                    xtype:"textfield",
                    maskRe:/[0-9.%]/,
                    width:53,
										name:'size_4'
                  },{
                    xtype:"textfield",
										name:'title_4'
                  },{
                    xtype:"checkbox",
										name:'active_5'
                  },{
                    xtype:"textfield",
                    maskRe:/[0-9.%]/,
                    width:53,
										name:'size_5'
                  },{
                    xtype:"textfield",
										name:'title_5'
                  },{
                    xtype:"checkbox",
										name:'active_6'
                  },{
                    xtype:"textfield",
                    maskRe:/[0-9.%]/,
                    width:53,
										name:'size_6'
                  },{
                    xtype:"textfield",
										name:'title_6'
                  }]
              },{
								html:"* Size : can be a percentage of total width (i.e. 33%),"+
									"a fixed with (i.e. 120), or empty (autosize)<br/>"+
									"** Title : not set if empty"
							}]
          }],
					buttons:[{
						text:'Ok',
						scope:this,
						handler:function() {
							var values = w.items.first().form.getValues();
							w.close();
							var config = {layout:'column',items:[]};
							Ext.each([1,2,3,4,5,6], function(r) {
								if (values['active_'+r]) {
									var item = {title:values['title_'+r]||null};
									var widthVal = values['size_'+r];
									var width = parseInt(widthVal,10);
									if (!isNaN(width)) {
										if (widthVal[widthVal.length-1] == '%') {
											item.columnWidth = width/100;
										} else {
											item.width = width;
										}
									}
									config.items.push(item);
								}
							});
							add.call(this, config);
						}
					},{
						text:'Cancel',
						handler:function() {w.close();}
					}]
			});
			w.show();

		}]);

		// Border layout
		data.push(['Layouts','Border Layout', 'Layout with regions', function(add,parent) {
				var w = new Ext.Window({
					title:"Border Layout",
					width:550,
					height:400,
					layout:'fit',
					items:[{
						autoScroll:true,
						xtype:"form",
						frame:true,
						defaults:{
							style:"margin:10px"
						},
						items:[{
								xtype:"fieldset",
								title:"Center",
								autoHeight:true,
								items:[{
										xtype:"textfield",
										fieldLabel:"Title",
										name:"title_center",
										width:299
									}]
							},{
								xtype:"fieldset",
								title:"Add north region",
								autoHeight:true,
								checkboxToggle:true,
								collapsed:true,
								checkboxName:"active_north",
								items:[{
										xtype:"textfield",
										fieldLabel:"Title",
										name:"title_north",
										width:299
									},{
										layout:"table",
										items:[{
												layout:"form",
												items:[{
														xtype:"numberfield",
														fieldLabel:"Height (px)",
														name:"height_north",
														allowDecimals:false,
														allowNegative:false,
														width:66
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"split_north",
														boxLabel:"Split"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"collapsible_north",
														boxLabel:"Collapsible"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"titleCollapse_north",
														boxLabel:"TitleCollapse"
													}]
											}]
									}]
							},{
								xtype:"fieldset",
								title:"Add south region",
								autoHeight:true,
								checkboxToggle:true,
								collapsed:true,
								checkboxName:"active_south",
								items:[{
										xtype:"textfield",
										fieldLabel:"Title",
										name:"title_south",
										width:299
									},{
										layout:"table",
										items:[{
												layout:"form",
												items:[{
														xtype:"numberfield",
														fieldLabel:"Height (px)",
														name:"height_south",
														allowDecimals:false,
														allowNegative:false,
														width:66
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"split_south",
														boxLabel:"Split"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"collapsible_south",
														boxLabel:"Collapsible"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"titleCollapse_south",
														boxLabel:"TitleCollapse"
													}]
											}]
									}]
							},{
								xtype:"fieldset",
								title:"Add west region",
								autoHeight:true,
								checkboxToggle:true,
								collapsed:true,
								checkboxName:"active_west",
								items:[{
										xtype:"textfield",
										fieldLabel:"Title",
										name:"title_west",
										width:299
									},{
										layout:"table",
										items:[{
												layout:"form",
												items:[{
														xtype:"numberfield",
														fieldLabel:"Width (px)",
														name:"width_west",
														allowDecimals:false,
														allowNegative:false,
														width:66
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"split_west",
														boxLabel:"Split"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"collapsible_west",
														boxLabel:"Collapsible"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"titleCollapse_west",
														boxLabel:"TitleCollapse"
													}]
											}]
									}]
							},{
								xtype:"fieldset",
								title:"Add east region",
								autoHeight:true,
								checkboxToggle:true,
								collapsed:true,
								checkboxName:"active_east",
								items:[{
										xtype:"textfield",
										fieldLabel:"Title",
										name:"title_east",
										width:299
									},{
										layout:"table",
										items:[{
												layout:"form",
												items:[{
														xtype:"numberfield",
														fieldLabel:"Width (px)",
														name:"width_east",
														allowDecimals:false,
														allowNegative:false,
														width:66
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"split_east",
														boxLabel:"Split"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"collapsible_east",
														boxLabel:"Collapsible"
													}]
											},{
												layout:"form",
												hideLabels:true,
												style:"margin-left:10px",
												items:[{
														xtype:"checkbox",
														name:"titleCollapse_east",
														boxLabel:"TitleCollapse"
													}]
											}]
									}]
							}],
						buttons:[{
							text:'Ok',
							scope:this,
							handler:function() {
								var values = w.items.first().form.getValues();
								w.close();
								var config = {layout:'border',items:[]};
								config.items.push({region:'center',title:values.title_center||null});
								Ext.each(['north','south','west','east'], function(r) {
									if (values['active_'+r]) {
										config.items.push({
											region        : r,
											title         : values['title_'+r]||null,
											width         : parseInt(values['width_'+r], 10)||null,
											height        : parseInt(values['height_'+r], 10)||null,
											split         : (values['split_'+r]?true:null),
											collapsible   : (values['collapsible_'+r]?true:null),
											titleCollapse : (values['titleCollapse_'+r]?true:null)
										});
									}
								});
								if (parent) { parent.layout = 'fit'; }
								add.call(this, config);
							}
						},{
							text:'Cancel',
							handler:function() {w.close();}
						}]
					}]
				});
				w.show();
			}]);

		return data;

	}
};