Ext 常见一些组件的使用

1、CheckBox

CheckBoxGroupFormPanel = Ext.extend(Ext.form.FormPanel,{
	constructor:function(){
		CheckBoxGroupFormPanel.superclass.constructor.call(this,{
			renderTo:Ext.getBody(),
			title:"复选框",
			width:500,
			height:400,
			frame:true,
			items:[
				{
					xtype:"fieldset",
					baseCls:'x-plain',
					title:"选择你的爱好",				
					items:[
						{
							xtype:'checkboxgroup',
							bodyStyle:"padding:5px",
							columns:2,//自动分列
							items:[
								{boxLabel:"音乐",inputValue:"music",name:"hobby1"},
								{boxLabel:"绘画",inputValue:"drawing",name:"hobby2",checked:true},
								{boxLabel:"书法",inputValue:"shufa",name:"hobby3"},
								{boxLabel:"其他",inputValue:"other",name:"hobby4"}
							]
						}
					]
				}
			],
			buttons:[
				{text:"提交",handler:this.submitButtonClick,scope:this}
			]
		});
	},
	submitButtonClick:function(){
		//Ext.Msg.alert("信息提示",this.getForm().getValues(true));
		this.setCheckboxGroup([true,false,true,true]);
	},
	setCheckboxGroup:function(_ary)
	{
		var _items = this.items.first().items.first().items;
		//Ext.Msg.alert("信息提示",_items.getCount());
		
		for(var _i = 0;i < _items.getCount();_i++)
		{
			_items.itemAt(_i).setValue(_ary[_i]);
		}
		
	}
})

2、Radio

RadioFormPanel = Ext.extend(Ext.form.FormPanel,{
	constructor:function(){
		RadioFormPanel.superclass.constructor.call(this,{
			renderTo:Ext.getBody(),
			title:"复选框",
			width:500,
			height:400,
			frame:true,
			items:[
				{
					xtype:"fieldset",
					baseCls:'x-plain',
					title:"选择你的爱好",				
					items:[
						{
							xtype:'radiogroup',
							bodyStyle:"padding:5px",
							columns:2,//自动分列
							items:[
								{boxLabel:"音乐",inputValue:"音乐",name:"hobby"},
								{boxLabel:"绘画",inputValue:"drawing",name:"hobby",checked:true},
								{boxLabel:"书法",inputValue:"shufa",name:"hobby"},
								{boxLabel:"其他",inputValue:"other",name:"hobby"}
							]
						}
					]
				}
			],
			/*items:{
				xtype:"radio",
				boxLabel:"项目1",
				name:"radio"
			},*/
			buttons:[
				{text:"提交",handler:this.submitButtonClick,scope:this}
			]
		});
	},
	submitButtonClick:function(){
		//Ext.Msg.alert("信息提示",this.getForm().findField("radio").getValue());
		/*this.getForm().loadRecord(new Ext.data.Record({
			radio:true
		}));*/
		Ext.Msg.alert("信息提示",this.getForm().getValues(true));
		//this.setRadioGroup([true,false,true,true]);
	},
	setRadioGroup:function(_ary)
	{
		var _items = this.items.first().items.first().items;
		//Ext.Msg.alert("信息提示",_items.getCount());
		
		for(var _i = 0;i < _items.getCount();_i++)
		{
			_items.itemAt(_i).setValue(_ary[_i]);
		}
		
	}
})
3、TreePanel
MyTreePanel = Ext.extend(Ext.tree.TreePanel,{
	
	constructor:function(){
		MyTreePanel.superclass.constructor.call(this,{
			renderTo:Ext.getBody(),
			animate:true,
			width:300,
			height:500,
			dataUrl:"http://localhost/ext/handlers/GetTree.ashx",
			//远程数据,根据节点加载数据
			/*root: {
				nodeType:"async",
				text: '根节点',
				draggable: false,
				id: "0"
			}*/
			//本地数据
			/*root:new Ext.tree.AsyncTreeNode({
				text:"根节点",
				children:[
					{
						text:"硬件",
						children:[
							{
								text:"板级维修",
								leaf:true
							},
							{
								text:"元件级维修",
								leaf:true
							}
						]
					},
					{
						text:"软件",
						leaf:true
					}
				]
			})*/
			//一次性获取所有节点
			root:new Ext.tree.AsyncTreeNode({
				text:"根节点",
				id:"0"
			})
		});
	}

})

知识共享许可协议
《Ext 常见一些组件的使用》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

1 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     164.11ms