ext入门代码

最新推荐文章于 2021-08-05 17:49:59 发布

fytcm

最新推荐文章于 2021-08-05 17:49:59 发布

阅读量140

点赞数

分类专栏： ext 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/fytcm/article/details/84472259

版权

ext 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-2.0/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="../ext-2.0/ext-all.js" ></script>

/*Ext.onReady(function(){
Ext.MessageBox.alert("hello2", "hello world");
});*/

function fn(){
alert("ext日常工作");
}

function box(){
Ext.MessageBox.alert("hello", "hello world");
}

//面板
function myPanel(){
    var myPanel = new Ext.Panel({
  renderTo:Ext.getBody(),
     title:'面板',
  width:400,
  height:300,
  html:'面板panel内容'
});

}

//面板
function myPanel2(){
    var myPanel = new Ext.Panel({
  renderTo:Ext.getBody(),
     title:'面板头部header',
  width:400,
  height:300,
  html:'<h1>面板主区域</h1>',
  tbar:[{
   text:'顶部工具栏topToolBar'
   }],
  bbar:[{
   text:'底部工具栏bottomToolBar'
   }],
  buttons:[{
   text:'按钮位于footer'
   }],
});

}

//面板编辑
function myPanel3(){
    var myPanel = new Ext.Panel({
  renderTo:Ext.getBody(),
     title:'面板头部header',
  width:400,
  height:300,

  items:[{
   xtype:'htmleditor'
  }],

});

}

//面板布局
function myPanel4(){
    var myPanel = new Ext.Panel({
  renderTo:Ext.getBody(),
     layout:'column',
  width:400,
  height:300,

  items:[{
   columnWidth:.5,
   title:'面板1'},
   {columnWidth:.5,
   title:'面板2'}],

});

}

//border布局
function myViewport(){
    var myViewport = new Ext.Viewport({
  renderTo:Ext.getBody(),
  layout:'border',
  items:[{
   region:'north',
   title:'north',
   height:200,
   minSize:100,
   maxSize:120,
   border:true,
   split:true,
   collapsible:true,
   },
   {
   region:'south',
   title:'south',
   height:200,
   minSize:100,
   maxSize:120,
   border:true,
   split:true,
   collapsible:true,
   },
   {
   region:'east',
   title:'east',
   width:120,
   minSize:120,
   maxSize:200,
   border:true,
   split:true,
   collapsible:true,
   },
   {
   region:'west',
   title:'west',
   width:120,
   minSize:120,
   maxSize:200,
   border:true,
   split:true,
   collapsible:true,
   },
   {
   region:'center',
   title:'center',

   border:true,
   split:true,
   collapsible:true,
   },]

});
}

//table布局
function myPanel5(){
    var myPanel = new Ext.Panel({
  renderTo:Ext.getBody(),
  title:'table布局',
  width:500,
  height:200,
  layout:'table',
  layoutConfig:{
   columns:3
  },
  items:[{
      title:'子元素1',
   html:'子元素1内容',
   height:100,
   rowspan:2
   },
   {
      title:'子元素2',
   html:'子元素2内容',

   colspan:2
   },
   {
      title:'子元素3',
   html:'子元素3内容',

   },
   {
      title:'子元素4',
   html:'子元素4内容',

   }]
});
}

//TabPanel标签面板
function myTabPanel(){
    var myTabPanel = new Ext.TabPanel({
  renderTo:Ext.getBody(),
  width:400,
  height:300,
  activeTab:0,
  items: [new Ext.Panel({
      title:'面板1',
      width:400,
      height:300,
      html:'面板1内容'}),
    new Ext.Panel({
      title:'面板2',
      width:400,
      height:300,
      html:'面板2内容'}),
    new Ext.Panel({
      title:'面板3',
      width:400,
      height:300,
      html:'面板3内容'}),]

});
}

//grid
function myGrid(){
//定义列
var cm = new Ext.grid.ColumnModel([
  {header:'编号', dataIndex:'id'},
  {header:'名称', dataIndex:'name'},
  {header:'描述', dataIndex:'desc'}
]);

//定义数据
var data = [
  ['1','name1','desc1'],
  ['2','name2','desc2'],
  ['3','name3','desc3'],
  ['4','name4','desc4']
];

//定义数据源
var ds = new Ext.data.Store({
  proxy:new Ext.data.MemoryProxy(data),
  reader:new Ext.data.ArrayReader({},[
   {name:'id'},
   {name:'name'},
   {name:'desc'}
  ])
});
ds.load();

var grid = new Ext.grid.GridPanel({
  renderTo:Ext.getBody(),
  ds:ds,
  cm:cm,
  width:300,
  autoHeight:true
});

}

//树
function myTree(){
var root = new Ext.tree.TreeNode({
  id:'root',
  text:'树的根'
});

root.appendChild(new Ext.tree.TreeNode({
  id:'c1',
  text:'子节点1'
}));

root.appendChild(new Ext.tree.TreeNode({
  id:'c2',
  text:'子节点2'
}));

    var tree = new Ext.tree.TreePanel({
  renderTo:Ext.getBody(),
  root:root,
  width:100
});

}

//表单
function myForm(){
Ext.BLANK_IMAGE_URL='images/default/s.gif';
var formPanel = new Ext.form.FormPanel({
  renderTo:Ext.getBody(),
  width:300,
  x:200,
  y:300,
  frame:true,
  cls:'text-align:center',
  labelAlign:'center',
  title:'login',
  id:'loginId',
  items:[{
   xtype:'textfield',
   fieldLabel:'用户名',
   name:'uesrname',
   blankText:'请输入用户名',
   allowBlank:false,
   msgTarget:'under'

   },
   {
   xtype:'textfield',
   fieldLabel:'密码',
   name:'psw',

   },
  ],
  buttonAlgin:'center',
  buttons:[{
   xtype:'button',
   text:'login',
   scope:this,
   handler:login
   },
   {
   xtype:'button',
   text:'reset',
   scope:this,
   handler:reset
   },

  ]

});

//登陆
function login(){
  formPanel.form.submit({
   clientValidation:true,
   waitMsg:'正在登录系统，请稍候...',
   method:'post',
   url:'http://www.baidu.com',
   //成功
   success:function(form, action){
    Ext.Msg.alert('提示', '系统登录成功');
   },
   //失败
   failure:function(form, action){
    Ext.Msg.alert('提示', '系统登录失败');
   }

  });
}

//重置
function reset(){
  formPanel.form.reset();
}

}

//信息弹出
function msgAlert(){
Ext.Msg.alert('title','msg',function(btn){
alert('你刚才点击了' + btn);
});
}

function msgConfirm(){
Ext.Msg.confirm('title','msg',function(btn){
alert('你刚才点击了' + btn);
});
}

function msgPrompt(){
Ext.Msg.prompt('title','msg',function(btn,text){
alert('你刚才点击了' + btn + '输入' + text);
});
}

//多行提示
function msgShow(){
Ext.Msg.show({
  title:'title',
  msg:'msg',
  buttons:Ext.MessageBox.OKCANCEL,
  multiline:true,
  width:300,
  fn:function(btn,text){
   alert('你刚才点击了' + btn + '输入' + text);
  }
});
}

function msgShowDialog(){
Ext.Msg.show({
  title:'title',
  msg:'msg',
  buttons:Ext.MessageBox.YESNOCANCEL,

  animEl:'dialog',
  fn:function(btn ){
   alert('你刚才点击了' + btn );
  }
});
}

function win(){
var win = new Ext.Window({
  title:'window',
  width:500,
  height:300,
  closable:true,
  minimizable:true,
  maximizable:true,
  tools:[{id:'save'},{id:'unpin'},{id:'plus'}]
});
win.show(this);
}

</script>
</head>

fytcm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext入门代码

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta
复制链接

扫一扫