a.jsp:
<script type="text/javascript">
Ext.onReady(function(){
var p = new MyApp.view.ui.zPanel;
p.render(Ext.getBody());
});
</script>
a.js:
//資料準備Grid
var _rzdatas = [
{id:'12',name:'zhangsan',username:'張三',organization:'河北省',status:'生效',handle:'<a href="yhgl_bj.jsp" target="_blank" rel="external nofollow" ><span class="sd" style="text-decoration:none">使用者編輯</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">重置密碼</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">解鎖</span></a>',contact:'222',time:new Date(1979,09,13)},
{id:'13',name:'lisi',username:'李四',organization:'北京市',status:'失效',handle:'<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span class="sd" style="text-decoration:none">使用者編輯</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">重置密碼</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">解鎖</span></a>',contact:'333',time:'new Date(1978,10,01)'},
{id:'14',name:'wangwu',username:'王五',organization:'天津市',status:'生效',handle:'<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span class="sd" style="text-decoration:none">使用者編輯</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">重置密碼</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">解鎖</span></a>',contact:'444',time:'new Date(1981,01,01)'},
{id:'15',name:'shiqian',username:'時遷',organization:'海南省',status:'生效',handle:'<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span class="sd" style="text-decoration:none">使用者編輯</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">重置密碼</span></a>|<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><span style="text-decoration:none">解鎖</span></a>',contact:'444',time:'new Date(1981,01,01)'}
];
//注冊資料模型Grid
Ext.regModel("rzmodel",{
fields:['name','username','organization','status','handle','contact','time:'],
proxy:{
//type:"ajax",
//url:"t/jccxQuery.do?type=1",
//reader:{type:"json",root:"ds",totalProperty: "total"}
type:'memory',
//data:_xxdatas,
reader:'json'
}
});
//準備資料集Grid
var _rzStore = new Ext.data.Store({
autoLoad:true,
data:_rzdatas,
model:'rzmodel',
pageSize:2
});
//store
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true, //true展開
id:'-1',
children: [
{ 'text': "系統", expanded: true,
children:[{'text':'北京市','leaf':false,'id':'1',
children:[
{ 'text':'海澱區','leaf':true,'id':'12'},
{ 'text':'朝陽區','leaf':true,'id':'13'}]
},
{'text':'河北省','leaf':false,
children:[
{ 'text':'石家莊','leaf':true,'id':'14'},
{ 'text':'唐山市','leaf':true,'id':'15'}]
},
{'text':'海南省','leaf':false,
children:[
{ 'text':'海口市','leaf':true,'id':'16'}]
}]
}
]}
}
);
Ext.define('MyApp.view.ui.zPanel', {
extend: 'Ext.panel.Panel',
title :'布局示例',
layout:{
type:'table', //table布局
columns:2
},
frame :true,
height : 700,
width : 1600,
renderTo: Ext.getBody(),
defaults : {
bodyStyle:'background-color:#FFFFFF;',
height : 500,
frame : true
},
items: [{
xtype: 'treepanel',
id:'t_id',
title: '基礎查詢',
width:150,
colspan:1, //占一列
split:true,
collapsible:true,
store: store,
rootVisible:false,//隐藏根節點
//useArrows: true,//在樹節點中使用箭頭
renderTo: Ext.getBody(),
listeners:{
itemclick:function(m,r,d,e,t){
var ids=r.store.getAt(e).get("id");
//建立Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
url : '../../page/xt_yhgl/yhgl_lbServer.jsp',
model: 'rzmodel',
reader: 'json'
});
//建立請求參數對象
var operation = new Ext.data.Operation({
action: 'read',//設定請求動作為read,
id:ids
});
//讀取資料
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回調函數
function callBack(operation){
//擷取原始響應資料
var responseText = operation.response.responseText;
_rzStore.removeAll();
_rzStore.add(Ext.decode(responseText));
};
}
}
},{
xtype:'gridpanel',
title: '清單',
width:900,
colspan:1,
autoScroll:true,
//表格上方部分
bodyCls:"gridheader",
tbar:[{
text:'顯示全部',
handler:function(){
var msg = '';
var rows = me.getSelectionModel().getSelection();
for(var i = 0;i < rows.length;i++)
{
msg = msg + rows[i].get('number')+'\n';
}
alert(msg);
}
},{
text:'添加新使用者',
//觸發按鈕事件，彈出視窗
listeners:{
click:function(){
var tjwindow = new (MyApp.view.ui.yhgl_tj);
tjwindow.show();
}
}
}],
renderTo: Ext.getBody(),
store: _rzStore,
//定義表格前面空格
columnLines:true,
columns: [
//設定行号
Ext.create('Ext.grid.RowNumberer',{text : '', width : 35}),
{
xtype: 'numbercolumn',
dataIndex: 'id',
width:40,
style : 'text-align:center',
text: '序号'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
style : 'text-align:center',
text: '使用者名'
},
{
xtype: 'gridcolumn',
dataIndex: 'username',
width:65,
style : 'text-align:center',
text: '使用者姓名'
},
{
xtype: 'gridcolumn',
dataIndex: 'organization',
width:65,
style : 'text-align:center',
text: '所屬組織'
},
{
xtype: 'gridcolumn',
dataIndex: 'status',
width:65,
style : 'text-align:center',
text: '使用者狀态'
},
{
xtype: 'gridcolumn',
dataIndex: 'handle',
width:140,
style : 'text-align:center',//居中
text: '操作/狀态'
},
{
xtype: 'gridcolumn',
dataIndex: 'contact',
style : 'text-align:center',
text: '聯系方式'
},
{
xtype: 'datecolumn',
dataIndex: 'time',
style : 'text-align:center',
text: '建立時間',
//格式化時間顯示
renderer:Ext.util.Format.dateRenderer('Y-M-D h:m:d')
}
],
bbar: {
xtype:"pagingtoolbar",
pageSize: 2,
id:"MyApp.view.ui.zPanel",
store:_rzStore,
beforePageText:"第 ",
afterPageText:"頁，共 {0} 頁",
firstText:"第一頁",
prevText:"前一頁",
lastText:"末頁",
nextText:"下一頁",
refreshText:"重新整理",
emptyMsg:"沒有要顯示的資料",
displayInfo: true,
displayMsg:"<span style='font-size:13px;'>顯示第{0}到{1}條,共{2}條</span>",
plugins:[Ext.create("Ext.ux.ProgressBarPager",{})],
listeners:{
change:function( pagebar, pageData, eOpts){
//alert(pageData);
}
}
},
viewConfig: {
forcceFit:true,
stripeRows:true
}
}]
});