閒了將近二十天，一直在學習extjs，昨天接到通知，下週將進入新的專案組培訓，培訓內容是flex。
在學extjs的時候，見過別人對extjs和flex的比較。記得當時有人說extjs和flex根本不是乙個層次上的框架，但那時我依然連flex是什麼都沒有去查，而毅然的選擇了extjs。但可笑的是，下乙個專案的應用就是flex。
由於專案的緊張，也許對extjs的學習將要告一段落了。所以，我該寫點什麼。
用extjs做登入
index.html
<
div
id="north-div"
><
a id
="login"
href
="#"
>
login
a>
div>
login.js
ext.onready(
function
() );
//建立formpanel物件
varformpanel
=new
ext.form.formpanel( ,
defaulttype : 'textfield',
frame :
false
,id : 'login
-form',
//form面板上的元件
items : [ , ],
labelwidth :
120,
region : 'center',
url : loginurl
});//
建立window物件，用來裝置以上兩個面板，使login顯示在乙個window上
varwin
=new
ext.window( );
},scope : onclicklogin,
text : 'login'
}, ,
scope : onclicklogin,
text : 'cancel'
}],buttonalign : 'right',
closable :
false
,draggable :
true
,height :
200,
id : 'login
-win',
layout : 'border',
plain :
true,//
window上的元件
items : [logopanel, formpanel],
title : 'login',
width :
400});
//取得表單，參考login按鈕觸發的事件
form
=formpanel.getform();
//顯示window
win.show();
//return裡的為onclicklogin的共有函式
return
},fail :
function
(f, a)
};};
//設定login事件
ext.get('login').on('click', onclicklogin);
});
extjs是與後台對立的框架，所以後台的處理用什麼是隨意的，只要能夠返回前台可以識別的資料即可。
用extjs做布局
js**片段：
ext.contants
={};
ext.contants.links ='
<
a id="
link1
"href="
#">
link1
a><
br><
a id="
link2
"href="
#">
link2
a>'//
建立乙個tabpanel作為中間的面板
varcenterpanel
=new
ext.tabpanel( ,
plugins :
newext.ux.tabclosemenu()
});//
用viewport來實現布局
varviewport
=new
ext.viewport( , , , ,
//面板中包含幾個元件
items : [ , , , , , ]
}, centerpanel]
//最後乙個是中間的tabpanel
});
用事件來觸發centerpanel中新增乙個裝有gridpanel的tab，顯示新聞列表，tabpanel中新增乙個按鈕實現新增新聞。
varzhaiigrid;
//在tabpanel中的add按鈕觸發的事件，用來新增一條新資訊
varaddzhaii
=function
() ,
defaulttype : 'textfield',
frame :
false
,id : 'addzhaii
-form',
items : [ , ],
labelwidth : 80,
region : 'center',
url : 'addzhaii.do'
});}if(
!win) );
},scope : addzhaii,
text : 'add'
}, ,
scope : addzhaii,
text : 'cancel'
}],buttonalign : 'right',
closable :
false
,draggable :
true
,height :
300,
id : 'addzhaii
-win',
layout : 'border',
minheight :
250,
minwidth :
530,
plain :
true
,resizable :
true
,items : [formpanel],
title : 'link1 window',
width :
650});
}form
=formpanel.getform();
win.show();
};var
addzhaiiaction
=new
ext.action( );
varaddzhaiitab
=function
() <
br>','
<
p><
b>
contents:
b>
p>
')});
varcm
=new
ext.grid.columnmodel([expander, , , , , , ]);
vards
=new
ext.data.store( ),
reader :
newext.data.jsonreader( , [ , , , , , , ])
});ds.load(
});if
(ext.isempty(zhaiigrid)) ,
plugins : expander,
collapsible :
true
,animcollapse :
false
,title : 'zhaiigrid',
iconcls : 'icon
-grid',
closable :
true,//
top處新增事件按鈕
tbar : [addzhaiiaction],
//bottom處的分頁欄
bbar :
newext.paging*******( 條到 條記錄，一共 條',
emptymsg: '沒有記錄'
})});
//.show()了才會顯示
centerpanel.add(zhaiigrid).show();
} else
if(zhaiigrid
=centerpanel.getitem('zhaiigrid'))
else
,plugins : expander,
collapsible :
true
,animcollapse :
false
,title : 'adsfasd',
iconcls : 'icon
-grid',
closable :
true
,tbar : [addzhaiiaction],
bbar :
newext.paging*******( 條到 條記錄，一共 條',
emptymsg: '沒有記錄'
})});
centerpanel.add(zhaiigrid).show();}}
//給link1新增事件
ext.get('link1').on('click', addzhaiitab);
//初始化頁面時，便新增zhaiitab
addzhaiitab();
以上是一些**片斷，前幾天在研究desktop，想實現成動態的頁面，**還沒寫完。
暫時放下extjs一些日子，明天開始學習flex，既然都是客戶端框架，應該多少有些共通之處吧。誰知道呢，學學看吧。
extjs學習筆記 實戰
閒了將近二十天，一直在學習extjs，昨天接到通知，下週將進入新的專案組培訓，培訓內容是flex。在學extjs的時候，見過別人對extjs和flex的比較。記得當時有人說extjs和flex根本不是乙個層次上的框架，但那時我依然連flex是什麼都沒有去查，而毅然的選擇了extjs。但可笑的是，下乙...
Django筆記實戰
建立乙個新專案 django admin startproject myproject 專案名字 我們最初的專案結構由五個檔案組成 manage.py 使用django admin命令列工具的快捷方式。它由於執行 與我們專案相關的管理命令。我們將使用它來執行開發伺服器，執行測試，建立遷移等等。ini...
Python學習筆記實戰篇
import sys class logger object def init self,filename default.log stream sys.stdout self.terminal stream self.log open filename,a def write self,messa...