ext入门

1，下载ExtJs压缩包

2，将ext添加到工程目录js下，并在代码中引入ext

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>

3，书写ext的js代码

<script type="text/javascript">
Ext.onReady(function(){    
	alert('Hello World!');//页面初始化代码
});
</script>

Ext.onReady 是指在整个页面加载完后执行。

4，ext获得数据

 var myData = [
    	<s:iterator value="stuInfoList" status="status">
    	<s:if test="#status.last!=true">  
    		['<s:property value="schoolName" />',
    		 '<s:property value="classId" />',
    		 '<s:property value="studentName"/>',
    		 '<s:property value="studentId" />',
    		 '<s:property value="courseNum" />+<s:property value="courseNum1" />,!,<s:property value="studentId" />,!,<s:property value="classId" />,!,<s:property value="studentName" />',
    		 '修改,!,<s:property value="studentId"/>',
    		 '删除,!,<s:property value="studentId"/>'],
    	</s:if>
    	<s:elseif test="#status.last==true">    //结果会自动生成逗号的时候
    		['<s:property value="schoolName" />',
    		'<s:property value="classId" />',
    		'<s:property value="studentName"/>',
    		'<s:property value="studentId" />',
    		'<s:property value="courseNum" />+<s:property value="courseNum1" />,!,<s:property value="studentId" />,!,<s:property value="classId" />,!,<s:property value="studentName" />',
    		 '修改,!,<s:property value="studentId"/>',
    		'删除,!,<s:property value="studentId"/>']     //此处没有逗号了
    	</s:elseif>
    	</s:iterator>
    ];
	

4，reader

var reader = new Ext.data.ArrayReader({}, [
	       	{name: 'schoolName'},
	       	{name: 'classId'},
    		{name: 'studentName'},
    		{name: 'studentId'},
    		{name: 'courseNum'},
    		{name: 'do'},
    		{name: 'doo'}
    ]);

5，store

 var store = new Ext.data.GroupingStore({
    //  proxy: new Ext.ux.data.PagingMemoryProxy(myData),
      pageSize: 12,
      reader:reader,

     //  model: 'Master',
      /* autoLoad: false, 
       proxy:{
         type:'ajax',
         actionMethods:{read:'POST'},
         url:'findStus.action',
         reader:reader,
         }*/
         
      // pageSize: GridPageSize,
      // autoLoad: false, 
       //reader: reader,
      
       data: myData
     //  sortInfo:{field: 'qusNum', direction: "DESC"},
         //sortInfo:{field: 'studentId', direction: "ASC"},
       //  groupField:'classId'
    });

5，

  // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        sm:sm,
        cm: new Ext.grid.ColumnModel({
        columns: [
       		sm,
            {header: "学院", width: 150, sortable: true, dataIndex: 'schoolName'},
            {id:'classId',header: "班级", width: 150, sortable: true, dataIndex: 'classId'},
            {header: "姓名", width: 150, sortable: true, dataIndex: 'studentName'},
            {id:'studentId',header: "学号", width: 100, sortable: true, dataIndex: 'studentId'},
            {id:'courseNum',header: "选课数", width: 100, renderer: more,sortable: true, dataIndex: 'courseNum'},
            {header: "操作", width: 50, renderer: updateStu, dataIndex: 'do'},
            {header: "", width: 50, renderer: deleteStu, dataIndex: 'doo'}]
        }),
	     tbar:[delete_all,add_stu],  
         bbar: new Ext.PagingToolbar({
                pageSize: 12,
                store: store,
                displayInfo: true              
            }),
         columnLines: true,
         frame:true,
        // stripeRows: true,
        enableHdMenu: false, 
        autoExpandColumn: 'courseNum',
        view: new Ext.grid.GroupingView(),        
        height:520,
        width:900,
        title: '学生信息',
         //stateful: true,
       //  stateId: 'grid'
    });

6，

 grid.render('grid-example');