EXTJS 入门的例子

最近做项目开始使用EXTJS，以前没有接触过EXTJS，不过我相信经过坚持的学习和积累，很快就能上手，特此我记录一些学习的DEMO，不要怕学不会，就是怕自己练的少，一门技术熟才能生巧，多练肯定会，废话不多说，开始记录，走你：

提前准备：

导入Ext所需的样式表和类库：

<link   href="extjs/resources/css/ext-all.css"      rel="stylesheet" type="text/css"/>

<script src ="extjs/ext-all.js"                     type="text/javascript"></script>

<script src ="extjs/ext.base.js"                 type="text/javascript"></script>

<script src ="extjs/locale/ext-lang-zh_CN.js"     type="text/javascript"></script>

EXT的代码写在以下脚本内：

<script type="text/javascript">

    Ext.onReady(function(){







    });

</script>

 

现在开始写示例了，其实示例都是网上的，但是无所谓，转化为自己的东西就是自己的，只是别人比咱们先学习到了而已

  Ext.MessageBox.alert("审核提示","审核通过！");

 

var win = Ext.create("Ext.window.Window", {
title: '示例窗口',
width: 600,
height: 400
});
win.show();

 

var panel = new Ext.Panel({
title:"示例",
renderTo:'sub1',
width:'300px',
html:"<div id='div1' property1='pro1' style='height:200px'><div id='01'property1='pro1' >我的id是sub3</div><div id='02'></div></div>"
});

 

//开启悬浮提示功能

 Ext.QuickTips.init();

//开启动态加载

 Ext.Loader.setConfig({

     enabled: true

});

                Ext.create('Ext.panel.Panel', {

                      width:750,

                    layout: 'fit',

                    renderTo:'form-itdatum-checkbox',

                    items: {

                        xtype: 'userlist',

                        id:'testGrid2',

                        title: '多选表格-<span style="color:red;">只能点击多选框选中</span>',

                        selModel: new Ext.selection.CheckboxModel({checkOnly:true})

                    }

                });

var testGrid1=Ext.getCmp('testGrid1');
var records=testGrid1.getSelectionModel().getSelection();
if(records.length==0) {
Ext.MessageBox.alert('提示','请选择记录');
}else {
alert(Itdatum.net.grid.encodeRecords(records));
}

 

　　

 

 

资源地址 :http://www.zui dai ma.com/share/kextjs-p1-s1.htm