话不多说，进入正题，至于有的人想了解ex t 的优势神马的，自己百度去吧！ 一、ex it 的配置。（注意：本文讲解的是 Ex t js4.2.1，不同版本部署的js 包名有微小差别） 因为只是简单学习，方便新手入门，咱们只引入3 个基本包。 ext-all.css ext-all.js Ext.Base.js 怎么引入？ 二、示例。 1.helloworld，呵呵，学习程序嘛，咱们都是从 helloworld 开始的! 效果： 2.创建一个面板 Ext.onReady(function(){ //创建一个面板 var myPanel = new Ext.Panel({ renderTo:Ext.getBody(), title:'哈哈哈', width:300, height:300, html:'test 面板' }); }); 效果： 3.创建一个 tabpanel var panel = new Ext.TabPanel({ renderTo:Ext.getBody(), width:300, height:200, activeTab:0, items:[new Ext.Panel({ title:"面板 1", height:30, html:'面板 1 内容！' }),new Ext.Panel({ title:"面板 2", height:30, html:'面板 2 内容！' }),new Ext.Panel({ title:"面板 3", height:30, html:'面板 3 内容！' })] }); }); 效果： 3.创建面板工具栏 new Ext.Panel({ renderTo:Ext.getBody(), title:"GO,GO,GO,上去就是干！", width:300, height:200, html:'上去就是干！', tbar:[{ text:'顶部工具栏' }], bbar:[{ text:'底部工具栏' }], buttons:[{ text:'工具栏位于 footer' }] }); }); 效果： 4.创建左右布局的面板 var panel = new Ext.Panel({ renderTo:Ext.getBody(), width:300, height:200, layout:"column", items:[ {columnWidth:0.5, title:'面板 1', html:'面板 1 的内容！', },{ columnWidth:0.5, title:'面板 2', html:'面板 2 的内容！', } ] }); }); 效果： 5.创建表格布局 Ext.onReady(function(){ var data=[ [1, 'EasyJWeb', 'EasyJF','www.EasyJF.com'], [2, 'jfox', 'huihoo','www.huihoo.org'], [3, 'jdon', 'jdon','www.jdon.com'], [4, 'springside', 'springside','www.springside.org.cn'] ]; var store=new Ext.data.SimpleStore({ data: data, fields: ["id","name","organization","homepage"] }); var grid =new Ext.grid.GridPanel({ renderTo: Ext.getBody(), title:"中国 Java 社区", height:200, width:400, columns:[ {header:"编号", dataIndex:"id"}, {header:"项目名称", dataIndex:"name"}, {header:"开发团队", dataIndex:"organization"}, {header:"网址", dataIndex:"homepage"} ], store:store, autoExpandColumn: 2 }); }); 效果：
