您的位置：首页 > Web前端 > JavaScript

extjs 项目中技术要点摘录

2011-10-27 10:50 225 查看
1.利用Newtonsoft.Json.dll解析json数据

[Serializable]
public class User
{
public string id { get; set; }
public string userid { get; set; }
public string username { get; set; }
public string password { get; set; }
}

List<User> users = JsonConvert.DeserializeObject<List<User>>(jsonData);
foreach(User user in users)
{
}


2.前台提交后台

handler: function () {
form.getForm().submit({
success: function (form, action) {
window.location.href = 'Index.aspx';
},
failure: function () {
Ext.Msg.alert('错误', "用户名或密码有错");
}
});
}

Ext.lib.Ajax.request(
'POST',
'UserManage.aspx',
'JurisdictionManage.aspx?nodeid=' + nodeid + '&userid=' + userid,
{success: function(response){
Ext.Msg.alert('信息', response.responseText, function(){
window.location.href = 'UserManage.aspx';
});
},failure: function(){
Ext.Msg.alert("错误", "删除出错");
}},
'data=' + Ext.util.JSON.encode(jsonArray)
);


3.grid增加button按钮事件

{ header: '<b>操作</b>',
dataIndex: 'text',
align: 'center',
sortable: true,
width: 165,
renderer: showbutton
}

function showbutton(value, cellmeta) {
var returnStr = "<input class='btn' type='button' value='详细监测' onclick= 'buttonclick();'>";
return returnStr;
}
});
function buttonclick() {
//window.location.href('modules/GridMonitor/GridMonitor.aspx?id=');
//setActiveTab(1);
top.Ext.getCmp(0).setActiveTab(2);
}


4. 遍历整个tree

//先清空
getAllRoot(tree);
var result = response.responseText;
//有权限的赋值
var strs = result.split('&');
for(var i = 0; i < strs.length -1 ; i ++)
{
var n = tree.getNodeById(strs[i]);
n.parentNode.attributes.checked = true;
n.parentNode.ui.checked = true;
n.parentNode.ui.checkbox.checked = true;
n.attributes.checked = true;
n.ui.checkbox.checked = true;
}

function getAllRoot(value){
var rootNode = value.getRootNode();//获取根节点
rootNode.attributes.checked = false;
rootNode.ui.checkbox.checked = false;
findchildnode(rootNode); //开始递归
//nodevalue= temp.join(",");
//alert(nodevalue);
//return nodevalue;
}
//var temp = [];
//获取所有的子节点
function findchildnode(node){
var childnodes = node.childNodes;
Ext.each(childnodes, function (){ //从节点中取出子节点依次遍历
var nd = this;
nd.attributes.checked = false;
nd.ui.checkbox.checked = false;
//temp.push(nd.id);
if(nd.hasChildNodes()){ //判断子节点下是否存在子节点
findchildnode(nd); //如果存在子节点 递归
}
});
}


5.点击tree节点，连动选中子节点和父节点

listeners: {
"checkchange": function(node, flag) {
//获取所有子节点
node.cascade( function( node ){
node.attributes.checked = flag;
node.ui.checkbox.checked = flag;
return true;
});
//获取所有父节点
var pNode = node.parentNode;
for(; (pNode != null && pNode.id !="-1"); pNode = pNode.parentNode ){
if (flag || tree.getChecked(id, pNode ) == "") {
pNode.ui.checkbox.checked = flag;
pNode.attributes.checked = flag;
}
}
}


6.保存时遍历左右打勾节点

var nodevalue;
function getAllNode(tree){
var rootNode = tree.getRootNode();//获取根节点
findallchildnode(rootNode); //开始递归
nodevalue= temp.join(",");
return nodevalue;
}
var temp = [];
//获取所有的子节点
function findallchildnode(node){
var childnodes = node.childNodes;
Ext.each(childnodes, function (){ //从节点中取出子节点依次遍历
var nd = this;
if(nd.attributes.checked == true)
{
//temp.push('{');
temp.push(nd.id);
temp.push(nd.parentNode.id);
temp.push('}');
}
if(nd.hasChildNodes()){ //判断子节点下是否存在子节点
findallchildnode(nd); //如果存在子节点 递归
}
});
}


7.解决日历控件弹出宽度太小的问题

Ext.isIE8 = Ext.isIE && navigator.userAgent.indexOf('MSIE 8') != -1;
Ext.override(Ext.menu.Menu, {
autoWidth: function () {
var el = this.el, ul = this.ul;
if (!el) {
return;
}
var w = this.width;
if (w) {
el.setWidth(w);
} else if (Ext.isIE && !Ext.isIE8) {   //Ext2.2 支持 Ext.isIE8 属性
el.setWidth(this.minWidth);
var t = el.dom.offsetWidth;
el.setWidth(ul.getWidth() + el.getFrameWidth("lr"));
}
}
});


8.弹出加载数据的等待窗体

<body onload="showMsg();" id ="body" style=" width:100%;">
var myMask;
function showMsg() {
myMask = new Ext.LoadMask(Ext.getBody(), { msg: "正在加载数据...请稍候" });
myMask.show();
}
myMask.hide();


9.new一个对象弹出window

function showChart()
{
var chart = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [
{ name: 'Jul 07', visits: 245000, views: 300000 },
{ name: 'Aug 07', visits: 240000, views: 350000 },
{ name: 'Sep 07', visits: 355000, views: 400000 },
{ name: 'Oct 07', visits: 375000, views: 420000 },
{ name: 'Nov 07', visits: 490000, views: 450000 },
{ name: 'Dec 07', visits: 495000, views: 580000 },
{ name: 'Jan 08', visits: 520000, views: 600000 },
{ name: 'Feb 08', visits: 620000, views: 750000 }
]
});
var panel = new Ext.Panel({
title: '用电图表统计',
width: 800,
height: 500,
items: {
xtype: 'columnchart',
url: '../../ext/resources/charts.swf',
store: chart,
xField: 'name',
series:[
{
type:'column',
yField:'views',
displayName:'views'
},
{
type:'column',
yField:'visits',
displayName:'visits'
}]
}
});
var  win = new Ext.Window({
renderTo: 'showWin',
width: 800,
height: document.documentElement.clientHeight-50,
x:200,
y:10,
closable: false,
buttonAlign:'center',
items:[panel],
buttons:[{text:'日'},{text:'周'},{text:'月'},{text:'年'},{
text:'关闭',
handler:function(){
win.close();
}
}]
});
win.show();
}


10.ext form自动加载数据

var reader = new Ext.data.JsonReader({}, [
{ name: 'roomid', type: 'string' },
{ name: 'size', type: 'string' },
{ name: 'a', type: 'string' },
{ name: 'b', type: 'string' },
{ name: 'c', type: 'string' },
{ name: 'd', type: 'string' },
{ name: 'e', type: 'string' },
{ name: 'f', type: 'string' }
]);

var panel = new Ext.form.FormPanel({
labelAlign: 'right',
labelWidth: 130,
reader: reader,
items: [{
layout: 'column',
items: [{
columnWidth: .50,
layout: 'form',
items: [{ xtype: 'textfield', fieldLabel: '房间号', width: 110, disabled: true, name: 'roomid' },
{ xtype: 'textfield', fieldLabel: '面积', width: 110, disabled: true, name: 'size' },
{ xtype: 'textfield', fieldLabel: '电表读数', width: 110, disabled: true, name: 'a' },
{ xtype: 'textfield', fieldLabel: '当前用能',width: 110,disabled: true,name: 'b'}]
}, {
columnWidth: .50,
layout: 'form',
items: [{ xtype: 'textfield', fieldLabel: '日额定单位面积用能', name: 'c', width: 110, disabled: true },
{ xtype: 'textfield', fieldLabel: '日单位面积用能', name: 'd', width: 110, disabled: true },
{ xtype: 'textfield', fieldLabel: '用能状态', name: 'e', width: 110, disabled: true },
{ xtype: 'textfield', fieldLabel: '系统', name: 'f', width: 110, disabled: true }]
}]
}],
});

panel.getForm().load({
url: 'LightingGrid.aspx?num=1',
method: 'POST',
success: function (form, action) {
panel.load();
(action.result.data)
},
failure: function (form, action) {
}
});

后台json数据:
Response.Write("[{roomid:'237-241',size:'68.7',a:'125.0kwh',b:'0.5kwh',c:'0.34kwh',d:'3.4kwh',e:'正常',f:'稳定'}]");
Response.End();


11. extjs+funsioncharts结合显示图表

var panel = new Ext.form.FormPanel({
html: "<div id = \"showWin\"></div>"
});

var win = new Ext.Window({
width: 410,
height: document.documentElement.clientHeight - 120,
x: 300,
y: 10,
closable: false,
buttonAlign: 'center',
items: [panel],
buttons: [{
text: '关闭',
handler: function () {
win.close();
}
}]
});
win.show();
var chartXMLData = "<chart caption='照明情况' subCaption=''>";
chartXMLData += "<set label='1月' value='" + 5 + "' />";
chartXMLData += "<set label='2月' value='" + 6 + "' />";
chartXMLData += "<set label='3月' value='" + 7 + "' />";
chartXMLData += "<set label='4月' value='" + 8 + "' />";
chartXMLData += "<set label='5月' value='" + 9 + "' />";
chartXMLData += "<set label='6月' value='" + 9 + "' />";
chartXMLData += "<set label='7月' value='" + 9 + "' />";
chartXMLData += "<set label='8月' value='" + 9 + "' />";
chartXMLData += "<set label='9月' value='" + 9 + "' />";
chartXMLData += "<set label='10月' value='" + 9 + "' />";
chartXMLData += "<set label='11月' value='" + 9 + "' />";
chartXMLData += "<set label='12月' value='" + 9 + "' />";
chartXMLData += "</chart>";
var myChart = new FusionCharts("../../FusionCharts/Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData(chartXMLData);
myChart.render("showWin");


12. 子grid选中一行到父grid,grid删除一行

var rowIndex = gridBuild.store.indexOf(gridBuild.getSelectionModel().getSelected());
store1.add(storeBuild.getAt(rowIndex));
win.close();

var rowIndex = grid2.store.indexOf(grid2.getSelectionModel().getSelected());
store2.remove(store2.getAt(rowIndex));


13. editorgrid combobox 验证完成事件

if(gridBuild.activeEditor != null)
{
gridBuild.activeEditor.completeEdit();
}
gridBuild为editorgrid
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航