ext 资料存档

learnmore

浏览: 602764 次
性别:
来自: 上海

最近访客更多访客>>

wangyy

地方疙瘩人

leimingchao

chrunlee

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT JSP IE 浏览器数据结构

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!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>

分享到：