Professional Documents
Culture Documents
MessageBox
2008-8-7
extjs
extjs
1.Ext.MessageBox.alert()
Ext.MessageBox.alert("title","msg");
Ext.MessageBox.alert("title","msg",function(){alert("
")});
2.Ext.MessageBox.confirm()
alert()
Ext.MessageBox.confirm("title","msg",function(e){alert(e);});
e
yes,no,cancel.Alert()okcancel.
3.Ext.MessageBox.prompt()
alert
Ext.MessageBox.prompt("title","msg");
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text
);});
//"qianxudetianxia", ok ok-qianxudetianxia
Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text
);},this,true);
//true this
4.Ext.MessageBox.show()
config
1.animEl:id1 id1
2.buttons:Ext.Msg.OK,
Ext.Msg.OKCANCEL,
Ext.Msg.CAMCEL,
Ext.Msg.YESNO,
Ext.Msg.YESNOCANCEL
{"ok"," ok "}
false.
3.closable: false true
4.msg:""
5.title:""
6.fn:
7.icon Ext.MessageBox.INFO
Ext.MessageBox.ERROR,
Ext.MessageBox.WARNING,
Ext.MessageBox.QUESTION
8.width:
9.prompt true
10.multiline true
11.progress: true
12.progressText:
13.wait true progress
14.waitConfig: progress
example:
Ext.MessageBox.show({
title:"",
msg:"",
buttons:{"ok":" OK "},
fn:function(e){alert(e);},
animEl:"test1",
width:500,
icon:Ext.MessageBox.INFO,
closable:false,
progress:true,
wait:true,
progressText:""
// prompt:true
// multiline:true
});
4.Ext.MessageBox.show()
Ext.MessageBox.hide()
Ext.MessageBox.updateProgress(value,"ProgressText","msg")(
)
value 0-1 .
1
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"df",
msg:"dfd",
progress:true,
width:300,
closable:true
});
var f=function(v){
return function(){
if(v==12)
{
Ext.MessageBox.hide();
//alert("");
}
else
{
var i=v/11;
Ext.MessageBox.updateProgress(i,Math.round(100*i)+
"% completed",i);
}
}
}
for(var i=1;i<13;i++)
{
setTimeout(f(i),i*500);// 500*i
500ms
}
}
);
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"",
msg:"5s ",
progress:true,
width:300,
wait:true,
waitConfig:{interval:600},//0.6s
closable:true
});
setTimeout(function(){Ext.MessageBox.hide()},5000);//5
waitConfig
1.interval:
2.durationinterval
3.fn:duration
:
Ext.get("btn1").on(
"click",
function(){
Ext.MessageBox.show({
title:"",
msg:"5s ",
progress:true,
width:300,
wait:true,
waitConfig:{
interval:600,
duration:5000,
fn:function(){
Ext.MessageBox.hide();//
}},
closable:true
});
//setTimeout(function(){Ext.MessageBox.hide()},5000);
}
);
MessageBox ...
ExtJs2.0 (2)--Ext.Panel
2008-8-7
ExtJs2.0 (1)--Ext.MessageBox
extjsPanel
//html
<div id="container">
</div>
//js
var p = new Ext.Panel({
title: 'My Panel',//
collapsible:true,// false
renderTo: 'container',// panel html id container
width:400,
height:200,
html: "<p> html </p>"//panel
html
});
panel TabPanel,GridPanel,FormPanel,TreePanel
Panel
//()
1.autoLoad url url body
js html
2.autoScroll: true false
3.autoShow: true "x-hidden" false
4.bbar://bbar:[{text:'
bottomToolbar'}],
5.tbar://:tbar:[{text:'
topToolbar'}],
1. panel
panel panel .
//html
....
// panel
var p=new Ext.Panel({
title: 'Drag me',
x: 100,
y: 100,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody() panel
floating: true,//true
frame: true,//
width: 400,
height: 200,
draggable:true
}).show();// show
draggable
draggable: {
insertProxy: false,//
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);// panel
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//
}
}
draggable onDrag
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeig
ht());
}
//shadow realign shadow
panel
var p=new Ext.Panel({
title: 'Drag me',
x: 100,
y: 100,
renderTo: Ext.getBody(),
floating: true,
frame: true,
width: 400,
height: 200,
draggable: {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeig
ht());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
}
})
//
2. panel
var p=new Ext.Panel({
id:"panel1",
title:"",
collapsible:true,
renderTo:"container",
closable:true,
width:400,
height:300,
tbar:[{text:" 1"},{text:" 2"}], //
bbar:[{text:" 1"},{text:" 2"}], //
html:"",
buttons:[{text:" 1"},{text:" 2"}] //footer
});
tbar:[{text:" 1",handler:function(){Ext.MessageBox.alert("
1"," 1 ")}},{text:" 2"}],
// tbar handler 1
3.panel
// panel
tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function
(){Ext.MessageBox.alert("","
")}}],
//id handler
//id
toggle (collapsable true )
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
panel .
ExtJs2.0 (3)--Ext.Window
2008-8-7
ExtJs2.0 (2)--Ext.Panel
ExtJs2.0 (4)--Ext.FormPanel
panel--ExtJs2.0 (2)--Ext.Panelwindow
panel
//html
<div id="win" class="x-hidden">
</div>
//js
var w=new Ext.Window({
contentEl:"win",// html el:"win"
width:300,
height:200,
title:""
});
w.show();
panel window
// window
1.closeAction:close() window
hide, hidden
2.closable:true true
3.constraintrue window viewport false
4.modal:true false
5.plain//true false false
// show,
w.show
1. tabpanel window
var w=new Ext.Window({
contentEl:"win",
width:300,
height:200,
items:new Ext.TabPanel({
activeTab:0,// 1 tab 0
border:false,
items:[{title:"tab1",html:"tab1 windows
"},{title:"tab2",html:"tab2 windows "}]//TabPanel
}),
plain:true,//true false
false
title:""
});
w.show();
// bbar:[{text:""},{text:"
",handler:function(){w.close();}}],//bottom
buttons:[{text:""},{text:"
",handler:function(){w.close();}}],//footer
buttonAlign:"center",//footer ,
// collapsible:true,//
window extjs
pp
ExtJs2.0 (4)--Ext.FormPanel
2008-8-7
ExtJs2.0 (3)--Ext.Window
ExtJs2.0 (5)--Ext.FormPanel
Ext.window FormPanel, panel
//
Ext.form.FormPanel = Ext.FormPanel;
<!--html -->
<body>
<div id="form1"></div>
</body>
//js
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,//
renderTo:"form1",//
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
items:[
{
fieldLabel:"UserName",//
xtype:"textfield",//
name:"user",
id:"user",
width:200
},
{
fieldLabel:"PassWord",
xtype:"textfield",
name:"pass",
id:"pass",
width:200
}
],
buttons:[{text:""},{text:"",handler:function(){alert("
");}}]
});
items
items
//
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
defaults:{width:200,xtype:"textfield"},//*********//
items:[
{
fieldLabel:"UserName",
//xtype:"textfield",
name:"user",
id:"user",
//width:200
},
{
fieldLabel:"PassWord",
//xtype:"textfield",
name:"pass",
id:"pass",
inputType:"password",
//width:200
}
],
buttons:[{text:""},{text:"
",handler:function(){alert();}}]
});
inputType,
//input
radio
check
text()
file
password
FormPanel panel
1.labelAlign:fieldlabel "left"
"center","right"
2.labelWidth:fieldlabel
3.method:"get""post"
4.url""
5.submit: //
1.FormPanel fieldset
// items
items:[
{
xtype:'fieldset',
title: '',
collapsible: true,
autoHeight:true,
width:330,
defaults: {width: 150},
defaultType: 'textfield',
items :[{
fieldLabel: '',
name: 'hobby',
value: 'www.cnblogs.com'
},{
xtype:"combo",
name: 'sex',
store:["","",""],//
fieldLabel:"",
emptyText:'.'
}]
}
]
combox
2. xtype extjs form api
Form components
--------------------------------------form
Ext.FormPanel
checkbox
Ext.form.Checkbox
combo
Ext.form.ComboBox
datefield
Ext.form.DateField
field
Ext.form.Field
fieldset
Ext.form.FieldSet
hidden
Ext.form.Hidden
htmleditor
Ext.form.HtmlEditor
label
Ext.form.Label
numberfield
Ext.form.NumberField
radio
Ext.form.Radio
textarea
Ext.form.TextArea
textfield
Ext.form.TextField
timefield
Ext.form.TimeField
trigger
Ext.form.TriggerField
FormPanel
,
extjs
next !
ExtJs2.0 (5)--Ext.FormPanel
2008-8-7
ExtJs2.0 (4)--Ext.FormPanel
ExtJs2.0 (6)--Ext.FormPanel(ComboBox)
FormPanel fieldset ComboBox,
3. fieldset
chechbox
//
1.checkboxToggle:true//true checkbox fieldset
false
2.checkboxName:string// true checkbox name
js (html )
// items
{
xtype:"fieldset",
checkboxToggle:true,//
checkboxName:"dfdf",
title:"",
defaultType:'textfield',
width:330,
autoHeight:true,//
items:[{
fieldLabel:"UserName",
name:"user",
anchor:"95%"//330px-labelWidth 95% 5%
},
{
fieldLabel:"PassWord",
inputType:"password",//
name:"pass",
anchor:"95%"
}]
}
4.email
js extjs
// extjs
Ext.QuickTips.init();// tips
Ext.form.Field.prototype.msgTarget='side';//
"qtip","title","under","side",id( id)
//side
// onReady
function{}
1.
//
1.allowBlank:false//false true
2.blankText:string//
js
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
labelWidth:80,
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
defaults:{width:150,xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"",
allowBlank:false,//
blankText:"",//
This field is required!
id:"blanktest",
anchor:"90%"
}
]
});
2.vtype
items:
items:[
{fieldLabel:"",
vtype:"email",//email
vtypeText:"",//,
id:"blanktest",
anchor:"90%"
}
4.url//urlhttp://www.langsin.com
3.
extjs
// Ext.apply password
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val field
if(field.confirmTo){//confirmTo
id
var pwd=Ext.get(field.confirmTo);// confirmTo id
return (val==pwd.getValue());
}
return true;
}
});
// items
items:[{fieldLabel:"",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"",
id:"pass2",
vtype:"password",//
vtypeText:"",
confirmTo:"pass1",// id
anchor:"90%"
}
vtype
ExtJs2.0 (5)--Ext.FormPanelfieldset
ComboBox
.net
5.ComboBox
json
//cs (
)
public string ServerData="['','','']";
//aspx js
Ext.onReady(function(){
var combo=new Ext.form.ComboBox({
store:<%=ServerData%>,// ServerData string
"" object
js object
emptyText:'....',
applyTo: 'combo'
});
});
//aspx html
<input type="text" id="combo" size="20"/>
<%=ServerData%>
js html c#
6.js html c#
1.js c# string js
var str="<%=ServerData%>"("['','','']")
2.js c#
<!--
public string ServerData()
{
return "fdfdfdfdsf";
}
-->
<input id="Text2" type="text" value="<%=ServerData()%>"/>
3.js c#
<!--public string ServerData(string pram)
{
return pram+"";
}
js -->
<script>alert('<%=ServerData("") %>');</script>
js
7.ComboBox store
ComboBox store
store Store.data.Store
//
1.["",""] ComboBox value text
2.[["one","bbar","111"],["two","tbar","222"]],
value text
3.store GroupingStore, JsonStore, SimpleStore.
//
//
var data=[['','hubei'],['','jiangxi'],['
','anhui']];
// store
var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'],
data : data
});
// : store comboBox store
var combo = new Ext.form.ComboBox({
store: store,
displayField:'english',//store
mode remote displayField undefine select
displayField "text"
mode: 'local',// data 'local',
"remote"
emptyText:'...',
applyTo: 'combo'
});
displayField mode
8.ComboBox value
listeners
//ComboBox (api)
select
listeners:{
"select":function(){
alert(Ext.get("combo").dom.value);
//
id combo
}
}
//
transform:id//TimeField ComboBox
//js
var ExtSelect=new Ext.form.ComboBox({
transform:"select",//html id
width:80//
});
//html
<select id="select">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
//
extjs
10.ComboBox
1.valueField:"valuefield"//value
2.displayField"field" //
3.editablefalse//false true
4.triggerAction:"all"//"all","query"
"all"
ExtJs2.0 (7)--Ext.FormPanel ()
2008-8-7
ExtJs2.0 (6)--Ext.FormPanel(ComboBox)
ExtJs2.0 (8)--Ext.FormPanel()
N extjs
()
11.checkbox
js
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:330,
layout:"form",
labelWidth:30,
title:"checkbox ",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"panel",
layout:"column",// table,
fieldLabel:'',
isFormField:true,//, panel fieldLabel
items:[{
columnWidth:.5,// 50%
xtype:"checkbox",
boxLabel:"",//
name:""
},{
columnWidth:.5,
xtype:"checkbox",
boxLabel:"",
name:""
}]
}]
});
});
column table
//
1.checkedtrue//true false
2.name:"**"//name
3.value:""// undefine
12.radio
checkbox name
//
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:330,
layout:"form",
labelWidth:30,
title:"radio ",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"panel",
layout:"column",
fieldLabel:'',
isFormField:true,
items:[{
columnWidth:.5,
xtype:"radio",
boxLabel:"",
name:"sex"
//inputValue
},{
columnWidth:.5,
checked:true,
xtype:"radio",
boxLabel:"",
name:"sex"
}]
}]
});
});
13.htmleditor
js
//
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:600,
layout:"form",
labelWidth:50,
title:"htmleditor ",
labelAlign:"top",//items
renderTo:Ext.getBody(),
items:[{
xtype:"htmleditor",
id:"he",
fieldLabel:"",
anchor:"99%"
}]
});
});
//labelAlign
labelAlign: form items label
left left,right,top
// title
//
1.hideLabel:true// false
//, true
2.enableColorstrue// true
3.enableAlignments:true//
4.enableFonttrue//
5.enableFontSize:false// A
6.enableFormatfalse//
7.enableLinks:true//
8.enableListstrue//
9.enableSourceEdittrue//
14.datefield
js
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:200,
layout:"form",
labelWidth:30,
title:"dateditor ",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"datefield",
fieldLabel:"",
anchor:"99%"
}]
});
});
15.timefield
datefield timefield,
16.numberfield
datefield numberfield
17.triggerfield
onTriggerClickdatefield combox
()
js
Ext.onReady(function(){
Ext.QuickTips.init();
var myform=new Ext.FormPanel({
frame:true,
width:200,
layout:"form",
labelWidth:30,
title:"triggerfield ",
labelAlign:"left",
renderTo:Ext.getBody(),
items:[{
xtype:"trigger",
fieldLabel:"",
anchor:"99%",
onTriggerClick:function(e){
//
alert("www.langsin.com");
}
}]
});
});
form
formpanel
form
form
ExtJs2.0 (8)--Ext.FormPanel ()
2008-8-7
ExtJs2.0 (7)--Ext.FormPanel(
)
ExtJs2.0 (9)--Ext.TabPanel
form
,
formpanel
js
Ext.onReady(function(){
Ext.QuickTips.init();
var form=new Ext.FormPanel({
frame:true,
width:300,
//monitorValid:true,//
layout:"form",
labelWidth:70,
title:"",
labelAlign:"left",
renderTo:Ext.getBody(),
submit: function(){
this.getEl().dom.action = 'GetForm.aspx',
this.getEl().dom.method='POST',
this.getEl().dom.submit();
},
items:[{
xtype:"textfield",
fieldLabel:"",
//id:"UserName",
allowBlank:false,
blankText:"",
name:"UserName",
anchor:"90%"
},{
xtype:"textfield",
fieldLabel:"",
//id:"SmallName",
name:"SmallName",
anchor:"90%"
},{
xtype:"datefield",
fieldLabel:"",
//id:"RegDate",
name:"RegDate",
anchor:"90%"
}],
});
GetForm.aspx cs
protected void Page_Load(object sender, EventArgs e)
{
string UserName = Request.Form["UserName"];
string SmallName = Request.Form["SmallName"];
string RegDate = Request.Form["RegDate"];
Response.Write(UserName + "<br/>" + SmallName + "<br/>" + Reg
Date);
}
//
1. submit
submit: function(){
this.getEl().dom.action = 'GetForm.aspx',//
this.getEl().dom.method='POST',//
this.getEl().dom.submit();//
},
2. ajax
buttons:[{text:"",handler:login,formBind:true},{text:"
",handler:reset}]
});
function login(){
form.form.submit();//
}
function reset(){
form.form.reset();//
}
3. form monitorValid:true,
formBindtrue
buttons:[{text:"",handler:login,formBind:true},{text:"
",handler:reset}]
""
formpanel
form
http://www.17ext.com/showtopic-55.aspxext
form
GetForm.aspx
ValidateRequest="false"
js
Ext.onReady(function(){
Ext.QuickTips.init();
var form=new Ext.FormPanel({
frame:true,
width:500,
monitorValid:true,// formBind:true
layout:"form",
labelWidth:55,
title:"",
labelAlign:"right",
renderTo:Ext.getBody(),
submit: function(){
this.getEl().dom.action = 'GetForm.aspx',
this.getEl().dom.method='POST',
this.getEl().dom.submit();
},
items:[{
xtype:"panel",
layout:"column",
fieldLabel:"",
isFormField:true,
items:[{
columnWidth:.5,
xtype:"textfield",
allowBlank:false,
blankText:"",
name:"UserName",
anchor:"90%"
},{
columnWidth:.20,
layout:"form",
labelWidth:40,
labelAlign:"right",
items:[{
xtype:"radio",
fieldLabel:"",
boxLabel:"",
name:"Sex",
checked:true,
inputValue:"man",//
value on inputValue radio,checkbox
anchor:"95%"
}]
},{
columnWidth:.30,
layout:"form",
labelWidth:1,//
0
items:[{
xtype:"radio",
boxLabel:"",
labelSeparator:"",//
name:"Sex",
inputValue:"woman",
anchor:"95%"
}]
}]
},{//
xtype:"panel",
layout:"column",
fieldLabel:"",
isFormField:true,
items:[{
columnWidth:.5,
xtype:"datefield",
name:"BirthDate",
anchor:"90%"
},{
columnWidth:.5,
layout:"form",
labelWidth:40,//
fieldLabel
items:[{
xtype:"combo",
name:"Degree",
fieldLabel:"",
store:["","","","
","","",""],
emptyText:" ",
anchor:"90%"
}]
}]
},{//
xtype:"panel",
layout:"column",
isFormField:true,
fieldLabel:"",
items:[{
columnWidth:.2,
xtype:"checkbox",
boxLabel:"Spring.net",
name:"SpringNet",
inputValue:"spring"// value
on inputValue
},{
columnWidth:.2,
layout:"form",
labelWidth:1,
items:[{
xtype:"checkbox",
boxLabel:"Nhibernate",
labelSeparator:"",
name:"NHibernate",
inputValue:"nhibernate",
anchor:"95%"
}]
},{
columnWidth:.6,
layout:"form",
labelWidth:1,
items:[{
xtype:"checkbox",
boxLabel:"Linq",
labelSeparator:"",
name:"Linq",
inputValue:"linq",
anchor:"95%"
}]
}]
},{//
xtype:"textfield",
fieldLabel:"Email",
name:"Email",
vtype:"email",//email ,
vtypeText:"email ",
anchor:"56%"//
},{//
xtype:"textarea",
fieldLabel:"",
name:"OneWord",
height:50,
anchor:"95%"
},{//
xtype:"htmleditor",
fieldLabel:"",
name:"WantToSay",
anchor:"95%",
enableAlignments:false,//
enableLists:false//
}],
buttons:[{text:"",handler:login,formBind:true},{text:"
",handler:reset}]
});
function login(){
form.form.submit();
}
function reset(){
form.form.reset();
}
});
cs
protected void
{
string
string
string
string
string
string
string
ExtJs2.0 (9)--Ext.TabPanel
2008-8-17
ExtJs2.0 (8)--Ext.FormPanel()
ExtJs2.0 (10)--Ext.TabPanel
, extjs ,Tabpanel !
,,!
:
js :
Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
width:300,
activeTab:0,//
frame:true,
items:[{
contentEl:"tabOne",// id(
)
title:"",
closable:true//, false
},{
contentEl:"tabTwo",
title:""
}]
});
});
html :
<body style="margin:10px;">
<div>
<div id="tabOne" class="x-hide-display">i am tabOne!</div>
<div id="tabTwo" class="x-hide-display">i am tabTwo!</div>
</div>
</body>
<!-- class , x-hide-display,-->
:
//
1.tabPosition:"bottom"//, bottom,top. top(
top !)
2.tabTip:""// Ext.QuickTips.init();
,,
().
: iframe tab .
1. iframe tabpanel.
:
"",
html :
<body style="margin:10px;">
<div>
<a href="javascript:void(0)" onclick="parent.frames['mainFr
ame'].location='http://www.cnblogs.com'"></a>
<iframe id="mainFrame" name="mainFrame" src="http://www.bai
du.com" frameborder="0" height="100%" width="100%" style="overflow:hi
dden;"></iframe>
</div>
</body>
js :
Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,// viewport , height
frame:true,
items:[{
contentEl:"mainFrame",
tabTip:"fengjian",
title:"",
closable:true
}]
});
});
., tabpanel
tabpanel!
!
ExtJs2.0 (10)--Ext.TabPanel
2008-8-17
ExtJs2.0 (9)--Ext.TabPanel
Ext
tabpanel
2.tabpanel
"",,.
html:
<body style="margin:10px;">
<div>
<a id="AddNewTab" href="javascript:void(0)"></a>
</div>
</body>
js :
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,
frame:true,
items:[{
title:"autoLoad html ",
autoLoad:{url:"tab1.htm",scripts:true}
}]
});
//,
var index=0;
Ext.get("AddNewTab").on("click",function(){
tabsDemo.add({
title:"newtab",
id:"newtab"+index,
html:"new tab",
closable:true
});
tabsDemo.setActiveTab("newtab"+index);
index++;
})
});
:
, add(),
, setActiveTab(newtab id),
, index newtab
newtab
3. tabpanel()
<body style="margin:10px;">
<div>
<div id="AddBtn"></div>
</div>
</body>
js
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
//resizeTabs:true,,
activeTab:0,
height:200,
enableTabScroll:true,//
width:200,
frame:true,
items:[{
title:"tab advantage",
html:"sample1"
}]
});
var index=0;
//,,
function addTab()
{
tabsDemo.add({
title:"newtab",
id:"newtab"+index,
html:"new tab"+index,
closable:true
});
tabsDemo.setActiveTab("newtab"+index);
index++;
}
//(,)
new Ext.Button({
text:"",
handler:addTab
}).render(document.body,"AddBtn");
});
4. tabpanel
"",
.
//
1.enableTabScroll:true//
2. listeners:{"contextmenu":function( 1, 2, 3){ .}}
// tabpanel panle
e
3.// 2
activate deactivate
items:[{
title:"tab advantage",
listeners:{
deactivate:function(a){alert(",a
");},
activate:function(){alert("");}
},
html:"sample1"
}]
4.menu=new Ext.menu.Menu()//menu
menu.showAt(e.getPoint());
html html .
js :
Ext.onReady(function(){
Ext.QuickTips.init();
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
//resizeTabs:true,,
activeTab:0,
height:200,
enableTabScroll:true,//
width:400,
frame:true,
//
listeners:{
//:
tabpanel(tabsDemo),, e
"contextmenu":function(tdemo,myitem,e){
menu=new Ext.menu.Menu([{
text:"",
handler:function(){
tdemo.remove(myitem);
}
},{
text:"",
handler:function(){
//
tdemo.items.each(function
(item){
if(item.closable&&it
em!=myitem)
{
//
tdemo.remove(item
);
}
});
}
},{
text:"",
handler:addTab
}]);
//
menu.showAt(e.getPoint());
}
},
items:[{
title:"tab advantage",
html:"sample1"
}]
});
var index=0;
function addTab()
{
tabsDemo.add({
title:"ntab"+index,
id:"newtab"+index,
html:"new tab"+index,
closable:true
});
tabsDemo.setActiveTab("newtab"+index);
index++;
}
new Ext.Button({
text:"",
handler:addTab
}).render(document.body,"AddBtn");
});
tabpanel .
ExtJs2.0 (11)--Ext.XTemplate
2008-10-9
ExtgetgetDomgetCmpgetBodygetDoc
ExtJs2.0 (12)--Ext.TreePanel
XTemplate Extjs .
.
:
js :
Ext.onReady(function(){
//
var data={
name:"",
read:[{
book:'<<>>',
date:'2007-7-7'
},{
book:"<<>>",
date:"2006-6-6"
}]
}
//
var mypanel=new Ext.Panel({
width:400,
id:"mypanel",
title:"XtemplateData ",
renderTo:Ext.getBody()
});
//
var tpl=new Ext.XTemplate(
'<table><tr><th>:{name}</th></tr>',
'<tr><td>',
'<tpl for="read">',
'<p>:{#},:{book},:{date}</p>',
'</tpl></td></tr></table>'
);
//
tpl.overwrite(mypanel.body,data);
})
:
/*
var tpl=new Ext.XTemplate(
'<table><tr><th>:{name}</th></tr>',
'<tr><td>',
'<tpl for="read">',
'<p>:{#},:{book},:{date}</p>',
'</tpl></td></tr></table>'
);
tpl.compile();
tpl.overwrite(mypanel.body,data);
*/
1.tpl.compile();//, tpl.compile();,
.
2. tpl.overwrite(mypanel.body,data);//,
3.:{name}//,{},
4.,<tpl for="read">//(), tpl for
, tpl ,read
5.{.}//, color: ['Red', 'Blue', 'Black'],
{.} tpl ,:
'<tpl for="color">',
'<div> {.}</div>',
'</tpl>'
6.{#}//
7.parent.***//, parent,:{parent.name}
8.if//'<tpl if="age > 1">',
'<p>{name}</p>',
'</tpl>',
//if ,
9.:
xindex// index 1 ,[]
xcount// []
:
'<tpl for="read">',
'<p>:{#},:{book},:{date},:{[xindex%2==0?"
":""]},:{[xcount]}</p>',
'</tpl>
10.( api ):
var tpl = new Ext.XTemplate(
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isGirl(name) == false">',
html :
<div id="container">
</div>
css :
<style type="text/css">
body
{
font-size:12px
}
#container
{
border:1px solid black;
width:330px;
}
td,th
{
border-bottom:1px dashed black;
}
th
{
text-align:center;
}
.namewidth
{
width:120px;
}
.urlwidth
{
width:150px;
}
</style>
js :
Ext.onReady(function(){
var mydata;
Ext.Ajax.request({
url:"getXtemplateData.ashx",//
success:function(request){
mydata=request.responseText;//
mydata=eval('('+mydata+')');// eval
json
// extjs
:mydata=Ext.util.JSON.decode(mydata),
var tpl2=new Ext.XTemplate(
'< table><thead><tr><th></th><th class= "namewidth">
</th><th class="urlwidth"></th>< th>
</th></tr></thead><tbody>',
'<tpl for="results">',
'<tr><td>{#}</td><td>{linkname}</td><td>{linkurl}</td>
<td>{linkpos}</td><tr>',
'</tpl></tbody></table>'
);
tpl2.compile();
tpl2.overwrite(Ext.get("container"),mydata);
},
failure:function()
{
alert("failure!");
}
});
})
/******
1.Ext.Ajax.request(), ajax ,
2.eval "()" json ,
!mydata=eval('('+mydata+')');
3. ajax ,, ajax ,
~
4. success request ,,
*/
,. getXtemplateData.ashx :
<%@ WebHandler Language="C#" Class="getXtemplateData" %>
using
using
using
using
using
System;
System.Web;
System.Data;
System.Data.SqlClient;
System.Text;
******";
SqlConnection sqlconn = new SqlConnection(connstr);
SqlCommand comm = new SqlCommand("select * from xLink", sqlco
nn);
sqlconn.Open();
SqlDataReader sdr = comm.ExecuteReader();
while (sdr.Read())
{
tempResult.Append("{id:'");
tempResult.Append((int)sdr["id"]);
tempResult.Append("',linkname:'");
tempResult.Append((string)sdr["linkname"]);
tempResult.Append("',linkurl:'");
tempResult.Append((string)sdr["linkurl"]);
tempResult.Append("',linkpos:");
tempResult.Append((int)sdr["linkpos"]);
tempResult.Append("},");
}
tempResult.Remove(tempResult.Length - 1, 1);//
tempResult.Append("]}");
context.Response.Write(tempResult);//
}
public bool IsReusable {
get {
return false;
}
}
}
XTemplate,TreePanel~!
: ,!
======================
:
html:
<div id="head"><input id="linkid" type="text" /></div>
<div id="container">
</div>
js js :
new Ext.Button({
text:" id ",
handler:function(){
Ext.Ajax.request({
url:"getXtemplateData.ashx?id="+Ext.get("linkid").dom.v
alue,//
success:function(request){
mydata=request.responseText;
mydata=eval('('+mydata+')');
tpl2.overwrite(Ext.get("container"),mydata);
},
failure:function()
{
alert("failure!");
}
});
}
}).render(document.body,"head");
GetTemplateData.ashx :
//
public void ProcessRequest (HttpContext context) {
string sql="";
if (context.Request.QueryString["id"] != null)
{
sql = "select * from xLink where id>"+Convert.ToString(co
ntext.Request.QueryString["id"]);
}
else
{
sql="select * from xLink";
}
StringBuilder tempResult = new StringBuilder("{results:[");
string connstr = @"Data Source=WIN-7JW7UWR0M27\MSSQL2005;Init
ial Catalog=xgc;Persist Security Info=True;User ID=sa;Password=673592
063@qq.com";
SqlConnection sqlconn = new SqlConnection(connstr);
SqlCommand comm = new SqlCommand(sql, sqlconn);
sqlconn.Open();
SqlDataReader sdr = comm.ExecuteReader();
while (sdr.Read())
{
tempResult.Append("{id:'");
tempResult.Append((int)sdr["id"]);
tempResult.Append("',linkname:'");
tempResult.Append((string)sdr["linkname"]);
tempResult.Append("',linkurl:'");
tempResult.Append((string)sdr["linkurl"]);
tempResult.Append("',linkpos:");
tempResult.Append((int)sdr["linkpos"]);
tempResult.Append("},");
}
tempResult.Remove(tempResult.Length - 1, 1);
tempResult.Append("]}");
context.Response.Write(tempResult);
}
:
!
ExtJs2.0 (12)--Ext.TreePanel
2008-10-9
ExtJs2.0 (11)--Ext.XTemplate
ExtJs2.0 (13)--Ext.TreePanel
,TreePanel.
,,i
!
TreePanelPanel,Panel,
,ExtJs2.0 (2)--Ext.Panel
1.--
:
html:
<div id="container">
</div>
js :
Ext.onReady(function(){
var mytree=new Ext.tree.TreePanel({
el:"container",// html id
animate:true,//,
title:"Extjs ",
collapsible:true,
rootVisible:true,//
autoScroll:true,
autoHeight:true,
width:150,
lines:true,//
loader:new Ext.tree.TreeLoader(),//
root:new Ext.tree.AsyncTreeNode({
id:"root",
text:"",//
expanded:true,//
leaf:false,//
children:[{text:'',leaf:true},{id:'child2',text:'
',children:[{text:"111"}]}]
})
});
mytree.render();// render(),
})
,:
/* loader AsyncTreeNode children ,?*/
api , children ,,
, loader , AsyncTreeNode children
(appendChild),,
.
!
TreePanel :
//TreePanel
1.animate:true//,,false ,
2.autoHeight:true//, false
3.enableDrag:true// Drag(), Draggable
4.enableDD:true//, Drag (drap
drop)
5.enableDrop:true// drop
6.lines:true//
7.loader:Ext.tree.TreeLoader//
8.root:Ext.tree.TreeNode//
9.rootVisible:false//false , true
10.trackMouseOver:false//false mouseover
11.useArrows:true//
2. TreeNode
1
TreeNode :
//TreeNode
1.checked:false//true text ,false text
,
2.expanded:fasle//,
3.href:"http:/www.cnblogs.com"//
4.hrefTarget:"mainFrame"// blank,
iframe id, iframe
5.leaf:true//,
6.qtip:""//, Ext.QuickTips.init();
7.text:""//
8.singleClickExpand:true//,
:
html :
<body style="margin:10px;">
<div id="container">
</div>
<iframe name="mainFrame" id="mainFrame" height="100px" width="200
px" src="jstest.htm"></iframe>
</body>
js :
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:"Extjs ",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:150,
lines:true
});
//
var root=new Ext.tree.TreeNode({
id:"root",
text:"",
expanded:true
});
//
var sub1=new Ext.tree.TreeNode({
id:"news",
text:"",
singleClickExpand:true
});
sub1.appendChild(new Ext.tree.TreeNode({
id:"addNews",
text:"",
href:"http://www.baidu.com",
hrefTarget:"mainFrame",
qtip:"",
listeners:{//
"click":function(node,e){
alert(node.text)
}
}
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"editNews",
text:""
}));
sub1.appendChild(new Ext.tree.TreeNode({
id:"delNews",
text:""
}));
root.appendChild(sub1);
root.appendChild(new Ext.tree.TreeNode({
id:"sys",
text:""
}));
mytree.setRootNode(root);//
mytree.render();// render(),
})
3. TreeLoader
// TreeLoader
dataUrl:"*****.**"//
url:"****.**"//url dataUrl
:
html :
<div id="container">
</div>
js :
Ext.onReady(function(){
Ext.QuickTips.init();
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:" Extjs ",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:150,
lines:true,
// loader ,
loader:new Ext.tree.TreeLoader({
dataUrl:"json.ashx"
})
});
//
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"",
expanded:true
});
mytree.setRootNode(root);
mytree.render();// render(),
})
dataUrl json.ashx
/*---dataUrl .net
---*/
:.net json
using System.Web.Script.Serialization;
public string ToJson(object o)
{
JavaScriptSerializer j = new JavaScriptSerializer
();
return j.Serialize(o);
}
o json
json.ashx :
using
using
using
using
System;
System.Web;
System.Collections.Generic;
System.Web.Script.Serialization;
TreePanel
ExtJs2.0 (13)--Ext.TreePanel
2008-10-9
ExtJs2.0 (12)--Ext.TreePanel
ExtJs2.0 (14)--Ext.TreePanel(
)
,IEashx,
,!
extjs:treeLoader
4.IE
jsloader
loader:new Ext.tree.TreeLoader({
url:"json.ashx",
listeners:{
"loadexception":function(loader,node,response){
node.loaded = false;
node.reload.defer(10,node);//
true
}
}
})
5. TreeNodeUI
node node UI.
//TreeNodeUI ,node.getUI()=>TreeNodeUI
1.addClass("class")// css
2.getAnchor()// a (), a
3.getIconEl()// img (), icon
4.getTextEl()// span (),
5.hide()
6.show()
7.removeClass()
extjs
icon
js
//
root.on("click",function(node){
node.getUI().getTextEl().innerHTML="";//a ()
node.getUI().getIconEl().src="Image/add.gif";//img ()
});
node.getUI().getTextEl()firebug ,
node.getUI().getIconEl()
6. checkbox
vista IIS7.0 ( checkbox )
:
//
1.node.getUI().checkbox.checked//,true fasle
2..net json , dl:Jayrock.dll Jayrock.Json.dll,
using Jayrock;
using Jayrock.Json;
using Jayrock.JsonRpc;
// Jayrock JsonTextWriter json
3.checkchange ,
:
=>
:
1.?
//: img css class x-tree-node-icon, display
none
2. Jayrock.dll Jayrock.json.dll json ?
using (JsonTextWriter writer = new JsonTextWriter(context.Response.Ou
tput))
{
writer.WriteStartArray();//[
writer.WriteStartObject();//{
writer.WriteEndObject();//}
writer.WriteEndArray();//]
writer.WriteMember("text");//"text":
writer.WriteString(" 3");//
writer.WriteMember("checked");
writer.WriteBoolean(false);//bool
...
...
}
http://msdn.microsoft.com/zh-cn/library/bb299886.aspx#intro_to_json_t
opic5
/*
,?
,
1.ashx,!
2.json,checkedC#,checked,
!
,,!
*/
css :
//
<style type="text/css">
.x-tree-node-icon
{
display:none;
}
</style>
html :
<body style="margin:10px;">
<div id="container">
</div>
<div id="btn"></div>
</body>
js :
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL="ExtJs/resources/images/default/s.gif";
function mytoggleChecked(node)
{
//=>,
if(node.hasChildNodes())
{
//eachChild(fn),
node.eachChild(function(child){
child.getUI().toggleCheck(node.attributes.checke
d);
child.attributes.checked = node.attributes.check
ed;
//child.getUI().checkbox.checked=node.getUI().ch
eckbox.checked;//
child.on("checkchange",function(sub){
mytoggleChecked(sub);//
});
mytoggleChecked(child);//(,
)
})
}
}
var mytree=new Ext.tree.TreePanel({
el:"container",
animate:true,
title:" Extjs ",
collapsible:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:150,
lines:true,
loader:new Ext.tree.TreeLoader({
url:"checkjson.ashx",
listeners:{
"loadexception":function(loader,node,response){
//,
node.loaded = false;
node.reload.defer(10,node);
}
}
})
});
//
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"",
checked:false,
listeners:{
"checkchange":function(node){//
mytoggleChecked(node);//
}
},
expanded:true
});
mytree.setRootNode(root);
mytree.render();
root.expand(true);
new Ext.Button({
text:" id",
handler:function(){
var b=mytree.getChecked();
var checkid=new Array;// id
for(var i=0;i<b.length;i++)
{
if(b[i].leaf)
{
checkid.push(b[i].id);// id
}
}
alert(checkid.toString());//checkid.toString(),
,
}
}).render(document.body,"btn");
})
checkjson.ashx :
// Jayrock.Json.dll Jayrock.dll
<%@ WebHandler Language="C#" Class="checkjson" %>
using System;
using System.Web;
using System.Text;
// Jayrock
using Jayrock;
using Jayrock.Json;
using Jayrock.JsonRpc;
public class checkjson : IHttpHandler {
writer.WriteStartArray();
//111
writer.WriteStartObject();
writer.WriteMember("text");
writer.WriteString(" 3");
writer.WriteMember("id");
writer.WriteString("id_1");
writer.WriteMember("checked");
writer.WriteBoolean(false);
//111--111
writer.WriteMember("children");
writer.WriteStartArray();
writer.WriteStartObject();
writer.WriteMember("id");
writer.WriteString("id_1_1");
writer.WriteMember("text");
writer.WriteString(" 1");
writer.WriteMember("checked");
writer.WriteBoolean(false);
//111-111-111
writer.WriteMember("children");
writer.WriteStartArray();
writer.WriteStartObject();
writer.WriteMember("id");
writer.WriteString("id_1_1_1");
writer.WriteMember("text");
writer.WriteString(" 1");
writer.WriteMember("leaf");
writer.WriteBoolean(true</SPA
ExtJs2.0 (14)--Ext.TreePanel ()
2008-10-9
ExtJs2.0 (13)--Ext.TreePanel
ExtJs2.0 (15)--extjs
tree learn! ,
Linq,!
LinqData.dbml:
html :
<body>
<div id="container" style="float:left; margin-right:10px;">
</div>
<iframe name="mainFrame" id="mainFrame" src="http://www.baidu.com
" width="200px" height="200px"></iframe>
</body>
css :
<style type="text/css">
.leaf
{
background-image:url(ExtJs/resources/images/default/tree
/leaf.gif) !important;
}<!---->
.folder
{
background-image:url(ExtJs/resources/images/default/tr
ee/folder.gif) !important;
}<!---->
</style>
:
,:
:
js :
handler:function(){
Ext.MessageBox.prompt("
","",function(e,text){
if(e=="ok")
{
Ext.Ajax.request({
url: 'CURDTree.
ashx?newitemParentid='+node.parentNode.id.substring(2)+"&newitemValue
="+text,
success:functio
n(request)
{
mytree.root
.reload();//
mytree.root
.expand(true,false);
},
failure:functio
n(){
alert("
");
}
});
}
else
{
alert("
");
}
})
}
},{
text:"",
iconCls:'leaf',
handler:function(){
Ext.MessageBox.prompt("
","",function(e,text){
if(e=="ok")
{
Ext.Ajax.request({
url: 'CURDTree.
ashx?editItemid='+node.id+"&editItemvalue="+text,//
success:functio
n(request)
{
mytree.root
.reload();
mytree.root
.expand(true,false);
},
failure:functio
n(){
alert("
");
}
});
}
else
{
alert("
");
}
})
}
},{
text:"",
iconCls:'leaf',
handler:function(){
Ext.Ajax.request({
url: 'CURDTree.
ashx?delItemid='+node.id,// id
success:functio
n(request)
{
mytree.root
.reload();
mytree.root
.expand(true,false);
},
failure:functio
n(){
alert("
");
}
});
}
}]
});
nodemenu.showAt(e.getPoint());//men
u showAt
}
else if(!node.isLeaf()&&node.parentNode
!=null)
{
var nodemenu=new Ext.menu.Menu({
items:[{
text:"",
iconCls:'folder',
handler:function(){alert(no
de.id)}//
},{
text:"",
iconCls:'folder',
handler:function(){alert("
")}
},{
text:"",
iconCls:'folder',
handler:function(){alert("
")}
}]
});
nodemenu.showAt(e.getPoint());
}
}
}
});
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"",
expanded:true
});
mytree.setRootNode(root);
mytree.render();
})
:
//CURDTree.ashx
// Newtonsoft.Json.dll
<%@ WebHandler Language="C#" Class="CURDTree" %>
using System;
using System.Web;
using System.IO;
using System.Linq;
using Newtonsoft.Json;
public class CURDTree : IHttpHandler {
public void ProcessRequest (HttpContext context) {
LinqDataDataContext lddc = new LinqDataDataContext(@"Data Sou
rce=WIN-7JW7UWR0M27\MSSQL2005;Initial Catalog=LinqData;Persist Securi
ty Info=True;User ID=sa;Password=*****");
if (context.Request.QueryString["newitemParentid"] != null &&
context.Request.QueryString["newitemValue"] != null)
{
//
SmallClass sc = new SmallClass();
sc.BigClassId = Convert.ToInt32(context.Request.QueryStri
ng["newitemParentid"]);
sc.SmallClassName = Convert.ToString(context.Request.Quer
yString["newitemValue"]);
lddc.SmallClass.InsertOnSubmit(sc);
lddc.SubmitChanges();
}
else if (context.Request.QueryString["editItemid"] != null&&c
ontext.Request.QueryString["editItemvalue"]!=null)
{
//
SmallClass sc = lddc.SmallClass.First(s => s.id == Int32.
Parse(context.Request.QueryString["editItemid"]));
sc.SmallClassName = Convert.ToString(context.Request.Quer
yString["editItemvalue"]);
lddc.SubmitChanges();
}
else if (context.Request.QueryString["delItemid"] != null)
{
//
SmallClass sc = lddc.SmallClass.First(c => c.id == Int32.
Parse(context.Request.QueryString["delitemid"]));
lddc.SmallClass.DeleteOnSubmit(sc);
lddc.SubmitChanges();
}
else
{
StringWriter sw = new StringWriter();
}
public bool IsReusable {
get {
return false;
}
}
}
, extjs .
thanks!
ExtJs2.0 (15)--extjs
2008-10-9
ExtJs2.0 (14)--Ext.TreePanel(
)
extjs ,.
1.css.
:xtheme-olive.zip
,css(xtheme-olive.css)extjsresources
css:
, image ( olive)
extjs resources images
css :
xtheme-olive.css
:
2. cookie
:
/*
( cookie )
cookie
*/
:
//
1.document.getElementsByTagName("link")[1].href//
css href
2.var date=new Date();//
date.setTime(date.getTime()+30*24*3066*1000);//30
document.cookie="css="+name+";expires="+date.toGMTString();//
30 cookies( css)
3.var cookiesArr=document.cookie.split(";");
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
// cookies css cookies css
4. expires cookies
html :
<!---->
<a href="javascript:void(0)"
<a href="javascript:void(0)"
</a>
<a href="javascript:void(0)"
</a>
<a href="javascript:void(0)"
>purple</a>
onclick="changecss('')"></a>
onclick="changecss('xtheme-olive.css')">
onclick="changecss('xtheme-gray.css')">
onclick="changecss('xtheme-purple.css')"
js :
function changecss(name)
{
var date=new Date();
date.setTime(date.getTime()+30*24*3066*1000);
document.getElementsByTagName("link")[1].href="ExtJs/resources
/css/"+name;
document.cookie="css="+name+";expires="+date.toGMTString();//
cookies
}
var cookiesArr=document.cookie.split(";");
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
document.getElementsByTagName("link")[1].href="ExtJs/resources/css/
"+css;// css
():
OK extjs
.
http://files.cnblogs.com/qianxudetianxia/xtheme-slate.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-purple.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-galdaka.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-darkgray.zip
http://files.cnblogs.com/qianxudetianxia/xtheme-black.zip
thanks