ExtJs2.0 (1)--Ext.

MessageBox
2008-8-7
extjs

extjs
1.Ext.MessageBox.alert()

alert( title , msg , function(){} )

titlemsgfunction

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'}],

6.buttons: footer footer //

buttons:[{text:" footer"}]
7.buttonAlign:footer "left","right","center",
right
8.collapsible true false
9.draggable:true false
10.html:
11.idid id id
12.width
13.height
13.title:
14.titleCollapse true
false.
15.applyToid html
16.contentElid html el
17.renderToid html
//(applyTo RenderTo to html
contentEl html ext )
poor
contentEl - This config option is used to take existing content and p
lace it in the body of a new panel. It is not going to be the actual
panel itself. (It will actually copy the innerHTML of the el and use
it for the body). You should add either the x-hidden or the x-hide-di
splay CSS class to prevent a brief flicker of the content before it i
s rendered to the panel.
applyTo - This config option allows you to use pre-defined markup to
create an entire Panel. By entire, I mean you can include the header,
tbar, body, footer, etc. These elements must be in the correct order
/hierarchy. Any components which are not found and need to be created
will be autogenerated.
renderTo - This config option allows you to render a Panel as its cre
ated. This would be the same as saying myPanel.render(ELEMENT_TO_REND
ER_TO);
...

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();

items TabPanel window

// 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%"
}

vtype extjs vtype

//formvtype
1.alpha //
2.alphanum//
3.email//email"langsin@gmail.com"

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 (6)--Ext.FormPanel (ComboBox )

2008-8-7
ExtJs2.0 (5)--Ext.FormPanel
ExtJs2.0 (7)--Ext.FormPanel(
)
extjs

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
}
}
//

9. Extjs ComboBox select

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"

5.hiddenName:string // combo name

6.typeAhead:true,//
7.typeAheadDelay:3000,// 250
// api
combobox
aspx cs js
js aspx
js cs
aspx js js
js url
combobox
form

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

Page_Load(object sender, EventArgs e)

UserName = Request.Form["UserName"];
Sex = Request.Form["Sex"];
BirthDate = Request.Form["BirthDate"];
Degree = Request.Form["Degree"];
SpringNet = Request.Form["SpringNet"];
NHibernate = Request.Form["NHibernate"];
Linq = Request.Form["<FO

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 &gt; 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">',

'<p>Boy: {name} - {age}</p>',

'</tpl>',
'</tpl></p>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
,()
:
:

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;

public class getXtemplateData : IHttpHandler {

public void ProcessRequest (HttpContext context) {
StringBuilder tempResult = new StringBuilder("{results:[");
string connstr = @"Data Source=WIN-7JW7UWR0M27\MSSQL2005;Init
ial Catalog=xgc;Persist Security Info=True;User ID=sa;Password=******

******";
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;

public class jsondata

{
// jsondata
public string id;
public string text;
public bool leaf;
public List<jsondata> children=new List<jsondata>();//
}
public class json : IHttpHandler {
public List<jsondata> jsdata=new List<jsondata>();
public void ProcessRequest (HttpContext context) {
for (int i = 1; i < 5; i++)
{
jsondata jd = new jsondata();
jd.id="num"+i;
jd.text = ""+i;
jd.leaf = false;
for (int j = 1; j < 3; j++)
{
jsondata subjd = new jsondata();
subjd.id = "sub" + j;
subjd.text = "" + j;
subjd.leaf = true;
jd.children.Add(subjd);
}
jsdata.Add(jd);
}
context.Response.Write(ToJson(jsdata.ToArray()));//ToArray()
IE
}
public bool IsReusable {
get {
return false;
}
}

public string ToJson(object o)

{
// json
JavaScriptSerializer j = new JavaScriptSerializer();
return j.Serialize(o);
}
}
:

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 {

public void ProcessRequest(HttpContext context)

{
using (JsonTextWriter writer = new JsonTextWriter(context.Res
ponse.Output))
{
//,,,,,

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 :

///<reference path="Extjs_Intellisense.js" />

Ext.onReady(function(){
var mytree=new Ext.tree.TreePanel({
id:"mytree",
el:"container",
animate:true,
title:" tree",
collapsible:true,
frame:true,
enableDD:true,
enableDrag:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
width:250,
lines:true,
loader:new Ext.tree.TreeLoader({
url:"CURDTree.ashx",//
listeners:{
"loadexception":function(loader,node,response){
//,
node.loaded = false;
node.reload.defer(10,node);
}
}
}),
listeners:{
"contextmenu":function(node,e){
if(node.isLeaf())
{
var nodemenu=new Ext.menu.Menu({
items:[{
text:"",
iconCls:'leaf',//

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();

JsonWriter writer = new JsonWriter(sw);

var results = from small in lddc.SmallClass
join big in lddc.BigClass on small.BigClass
Id equals big.id
group small by small.BigClassId;
// json
writer.WriteStartArray();//[
Newtonsoft.Json.dll
foreach (var r in results)
{
writer.WriteStartObject();
writer.WritePropertyName("id");
writer.WriteValue("b_" + r.First().BigClass.id);
writer.WritePropertyName("text");
writer.WriteValue(r.First().BigClass.BigClassName);
writer.WritePropertyName("children");
writer.WriteStartArray();
foreach (var s in r)
{
writer.WriteStartObject();
writer.WritePropertyName("id");
writer.WriteValue(s.id);
writer.WritePropertyName("href");
writer.WriteValue("FormSubmit.aspx?id=" + s.id);
writer.WritePropertyName("hrefTarget");
writer.WriteValue("mainFrame");
writer.WritePropertyName("text");
writer.WriteValue(s.SmallClassName);
writer.WritePropertyName("leaf");
writer.WriteValue(true);
writer.WriteEndObject();
}
writer.WriteEndArray();
writer.WriteEndObject();
}
writer.WriteEndArray();//]
writer.Flush();
string myjson = sw.ToString();
context.Response.Write(myjson);// json
}

}
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