ext 资料归档

ext 资料存档

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
???
??? <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">???
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<link rel="stylesheet" type="text/css" href="css/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
?????? function extDemo()
?????? {
?????????? Ext.MessageBox.alert('hello world','hello world');
?????? }
?????? Ext.onReady(function(){
?????????? //事件监听
?????????? var but1=Ext.get("b1");
?????????? but1.on('click',function(){
????????????? Ext.Msg.alert("show click","点了b1");
?????????? })
?????????? //监测浏览器窗口大小的改变
?????????? Ext.EventManager.onWindowResize(function(width,height)
?????????? {
????????????? //alert('width:'+width+';height:'+height);
?????????? })
?????????? //监测浏览器文字大小的改变
?????????? Ext.EventManager.onTextResize(function(oldSize,newSize)
?????????? {
????????????? alert('oldsize:'+oldSize+';newSize:'+newSize);
?????????? })
?????????? //判断用户是否按了空格
?????????? Ext.get("text").on('keypress',function(e){
???????????? if(e.charCode==Ext.EventObject.SPACE)
???????????? {
???????????????? Ext.Msg.alert('info','按下了空格键');
???????????? }
?????????? });
?????????? //判断用户的鼠标滚轮操作(只支持ie)
?????????? Ext.get(document.body).on('mousewheel',function(e){
???????????? var delta=e.getWheelDelta();
???????????? var test=Ext.get('text');
???????????? var width=test.getWidth();
???????????? test.setWidth(width+delta*100,true);
?????????? });
?????????? //生成一个Ext BoxComponet
?????????? var box=new Ext.BoxComponent({
?????????? el:'test',
?????????? style:'background-color:red;position:absolute;',
?????????? pageX:100,
?????????? pageY:50,
?????????? width:200,
?????????? height:150
?????????? });
?????????? //box.render();
??????????
?????????? //Ext.Panel
?????????? var panel=new Ext.Panel({
?????????? el:'test',
?????????? title:'测试标题',
?????????? floating:true,
?????????? shadow:true,
?????????? draggable:true,
?????????? collapsible:true,
?????????? html:'测试内容',
?????????? pageX:100,
?????????? pageY:50,
?????????? width:200,
?????????? height:150
?????????? });
?????????? //panel.render();
??????????
?????????? //Ext.TabPanel
?????????? var tabs=new Ext.TabPanel({
????????????? //renderTo:document.body,
????????????? height:100
?????????? });
?????????? tabs.add({
????????????? title:'标题1',
????????????? html:'内容1'
?????????? });
?????????? tabs.add({
????????????? id:Ext.id(),
????????????? title:'标题2',
????????????? html:'内容2',
????????????? closable:true
?????????? });
?????????? //autoLoad默认使用延时加载,激活时才加载
?????????? tabs.add({
????????????? title:'表格'+id,
????????????? closable:true,
????????????? layout:'fit',
????????????? autoLoad:{url:'1.jsp',scripts:true}
?????????? });
?????????? tabs.activate(2);
?????????? //Ext.Grid 表格控件
??????????
?????????? //定义复选框,并且重设选择处理函数
????????? // var sm=new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
????????? //定义选择模型
?????????? var sm=new Ext.grid.RowSelectionModel({singleSelect:true});
?????????? //定义表结构
?????????? var cm=new Ext.grid.ColumnModel([
???????????? //自动显示行号
???????????? //new Ext.grid.RowNumberer(),
???????????? //复选框
???????????? //sm,
???????????? {header:'编号',dataIndex:'id',sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
??????????????? allowBlank:false
???????????? }))},
???????????? {header:'roomno',dataIndex:'name',sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
??????????????? allowBlank:false
???????????? }))},
???????????? {id:'descn',header:'accnt',dataIndex:'descn',sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({
??????????????? allowBlank:false
???????????? }))},
???????????? {header:'性别',dataIndex:'sex',renderer:function(value){
??????????????? if(value=='male')
??????????????? {
??????????????????? return "<span style='color:red'>男</span>";
??????????????? }else
??????????????? {
??????????????????? return "<span style='color:green'>女</span>";
??????????????? }
???????????? },editor:new Ext.grid.GridEditor(new Ext.form.TextField({
??????????????? allowBlank:false
???????????? }))}
?????????? ]);
?????????? //定义存储
?????????? var store=new Ext.data.Store({
?????????? //proxy:new Ext.data.MemoryProxy(data),
?????????? proxy:new Ext.data.HttpProxy({url:'extGrid.action'}),
?????????? reader:new Ext.data.JsonReader({
????????????? totalProperty:'totalProperty',
????????????? root:'topic'},
????????????? [
??????????????? {name:'id'},
??????????????? {name:'name'},
??????????????? {name:'descn'}
????????????? ])
?????????? });
??????????
?????????? //装配数据,创建可编辑的表格数据
?????????? var grid=new Ext.grid.EditorGridPanel({
???????????? //渲染名称为grid的div
???????????? renderTo:'grid',
???????????? store:store,
???????????? cm:cm,
???????????? sm:sm,
???????????? height:350,
???????????? //斑马线
???????????? stripeRows:true,
???????????? //遮罩
???????????? loadMask:true,
???????????? //自动计算所有列的宽度
???????????? viewConfig:{
??????????????? forceFit:true
???????????? },
???????????? //只适应某一列的宽度,需要定义表结构的时候指定id
???????????? autoExpandColumn:'descn',
???????????? //分页
???????????? bbar:new Ext.PagingToolbar({
??????????????? pageSize:10,
??????????????? store:store,
??????????????? displayInfo:true,
??????????????? displayMsg:'显示第{0}条到第{1}条记录,一共{2}条',
??????????????? emptyMsg:'没有记录'
???????????? }),
???????????? tbar: [{
??????????????????? text: 'Add Plant',
??????????????????? handler : function(){
??????????????????? // access the Record constructor through the grid's store
??????????????????? var Plant = grid.getStore().recordType;
??????????????????? var p = new Plant({
??????????????????? id: '1',
??????????????????? name: 'Mostly Shade',
??????????????????? descn:'descn nnn',
??????????????? });
??????????????? grid.stopEditing();
??????????????? store.insert(0, p);
??????????????? grid.startEditing(0, 0);
??????????? }},
??????????? {
??????????? text:'Remove Employee',
??????????? handler:function()
??????????? {
??????????????? grid.stopEditing();
??????????????? var s=grid.getSelectionModel().getSelections();
??????????????? for(var i=0,r;r=s[i];i++)
??????????????? {
??????????????????? store.remove(r);
??????????????? }
??????????? }
??????????? }
??????? ]
?????????? });
?????????? store.load({params:{start:0,limit:10}});
??????????
?????????? //如果删除某一行,刷新表格,让序列号连续
?????????? grid.view.refresh();
?????????? /**
?????????? //弹出选择的信息
?????????? grid.on('click',function(){
??????????? var selections=grid.getSelectionModel().getSelections();
??????????? for(var i=0;i<selections.length;i++)
??????????? {
?????????????? var record=selections[i];
?????????????? Ext.Msg.alert('信息',record.get("id")+","+record.get("name")+","+"descn"+record.get("descn"));
??????????? }
?????????? })
??????????? */
?????????? //表单控件
???????? var form = new Ext.form.FormPanel({
??????? baseCls: 'x-plain',
??????? layout:'absolute',
??????? url:'saveform.action',
??????? defaultType: 'textfield',

??????? items: [{
??????????? x: 0,
??????????? y: 5,
??????????? xtype:'label',
??????????? text: 'Send To:'
??????? },{
??????????? x: 60,
??????????? y: 0,
??????????? name: 'id',
??????????? anchor:'80%'? // anchor width by percentage
??????? },{
??????????? x: 0,
??????????? y: 35,
??????????? xtype:'label',
??????????? text: 'Subject:'
??????? },{
??????????? x: 60,
??????????? y: 30,
??????????? name: 'name',
??????????? anchor: '100%'? // anchor width by percentage
??????? },{
??????????? x:0,
??????????? y: 60,
??????????? xtype: 'textarea',
??????????? name: 'descn',
??????????? anchor: '100% 100%'? // anchor width and height
??????? }]
??? });

??? var window = new Ext.Window({
??????? title: 'Resize Me',
??????? width: 500,
??????? height:300,
??????? minWidth: 300,
??????? minHeight: 200,
??????? layout: 'fit',
??????? plain:true,
??????? bodyStyle:'padding:5px;',
??????? buttonAlign:'center',
??????? items: form,
??????? buttons: [{
??????????? text: 'Send',
??????????? handler:function(){
?????????????? form.getForm().submit({
????????????????? success:function(form,action)
????????????????? {
?????????????????????? Ext.Msg.alert('信息',action.result.msg);
?????????????????????? grid.getStore().reload();
????????????????? },
????????????????? failure:function()
????????????????? {
?????????????????????? Ext.Msg.alert('信息','操作失败');
????????????????? }
?????????????? });
??????????? }
??????? },{
??????????? text: 'Cancel'
??????? }]
?????? });
?????? window.show();
})
</script>
? </head>
? <body>
??? <input type="button" value="a" onclick="extDemo()"/><br>
??? <input type="button" value="1" id="b1"/>
??? <input type="button" value="2" id="b2"/>
??? <input type="button" value="3" id="b3"/>
??? <input type="text" id="text" width="10"/>
??? <div id='test'></div>
??? <div id="grid" style="autoHeight:true"></div>
? </body>
</html>??

ext 资料归档

热点推荐