Ext js 应用例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<link href="Default.css" rel="stylesheet" /> <link href="../js/ext-4.2.1.883/resources/css/ext-all.css" rel="stylesheet" /> <script src="../Scripts/jquery-1.11.3.min.js"></script>
<script src="../js/ext-4.2.1.883/ext-all.js"></script>
<script src="../js/ext-4.2.1.883/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/json2.js"></script>
<script src="Default.js"></script>
<style type="text/css">
.x-tree-node-text {
align-content: center;
line-height: 17px;
} .x-tree-view {
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
</body>
</html>
Default.html
var products = [];
var templates = [];
var category = '';
var categoryName = '';
var currentSelectedTid = 0;
var currentQuoteType = "";
var uri = "http://" + window.location.hostname + "/WebApi/api/";
var isadmin = false; Ext.BLANK_IMAGE_URL = '../Themes/resources/images/default/s.gif';
$(function () { IsAdmin() })
function IsAdmin() {
$.ajax({
type: 'get',
url: 'handler.ashx?param=username',
async: false,
success: function (data) {
isadmin = data == "Y" ? true : false;
}
});
} //產品目錄 var tree_store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true
},
autoLoad: false
}); var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: '部件',
split: true,
height: 360,
minSize: 150,
border: false,
rootVisible: false,
autoScroll: true,
store: tree_store,
lines: false,
listeners: {
itemclick: function (thisTree, record, item, index, e, options) {
if (record.get('leaf')) {
TreeClick(record.raw);
} else {
TreeClickTypeId(record.raw.FormTypeId);
}
}
}
}); function TreeClick(row) {
switch (row.FormTypeId) {
case 1:
case 5:
category = row.CategoryId;
categoryName = row.Name; template_store.load({
url: uri + 'template/GetListByCategoryId',
params: {
categoryId: row.CategoryId,
flag: isadmin
},
scope: this,
callback: function (records, operation, success) {
if (records == null) return;
for (var i = 0; i < records.length; i++) {
templates.push(records[i].data);
} }
});
break;
case 2:
category = row.FormNo;
categoryName = row.Name;
if (row.FormNo == 'SetupBoxN') { template_store.load({
url: uri + 'template/GetFoldingBoxTemplateByCategoryId',
params: {
categoryId: 2045,
flag: isadmin
},
scope: this,
callback: function (records, operation, success) { if (records == null) return;
for (var i = 0; i < records.length; i++) {
templates.push(records[i].data);
} }
});
}
else {
template_store.load({
url: uri + 'template/GetListByQuoteType',
params: {
quoteType: row.FormNo,
flag: isadmin
},
scope: this,
callback: function (records, operation, success) { if (records == null) return; for (var i = 0; i < records.length; i++) {
templates.push(records[i].data);
}
}
});
}
break;
case 6:
case 10:
case 11:
case 16:
category = row.FormNo;
categoryName = row.Name; template_store.load({
url: uri + 'template/GetListByQuoteType',
params: {
quoteType: row.FormNo,
flag: isadmin
},
scope: this,
callback: function (records, operation, success) { if (records == null) return; for (var i = 0; i < records.length; i++) {
templates.push(records[i].data);
} }
});
break;
default:
$('#TemplateContainer').html(''); templates = []; }
if (row.id == "0") {
GetAllTemplate();
}; } function TreeClickTypeId(typeId) {
template_store.load({
url: uri + 'template/GetTemplateByFormTypeId',
params: {
typeId: typeId,
flag: isadmin
},
scope: this,
callback: function (records, operation, success) { if (records == null) return; for (var i = 0; i < records.length; i++) {
templates.push(records[i].data);
} }
});
} function LoadTree() {
var treeMask = new Ext.LoadMask('tree-panel', {
msg: '正在载入，请稍后...',
removeMask: true //完成后移除
}); treeMask.show(); //显示
tree_store.setProxy({
type: 'ajax',
url: uri + "Category/GetExtCategory"
});
tree_store.load();
tree_store.on("load", function (store) {
var record = treePanel.getStore().getNodeById('0');
var x = treePanel.getSelectionModel().select(record);
treePanel.fireEvent('itemclick', treePanel, record);
treeMask.hide();
}); } //模板 var TemplateModel = Ext.define('TemplateModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'TemplateId'
},
{
name: 'TemplateName'
},
{
name: 'TemplateDesc'
},
{
name: 'QuoteType'
},
{
name: 'ImgUrl'
},
{
name: 'ApproveState'
},
{
name: 'Isdelete'
},
{
name: 'Visible'
},
{
name: 'IsCustom'
},
{
name: 'CategoryName'
},
{
name: 'Notes'
},
{
name: 'EditBtn'
}
]
});
//模板的HTML
var template_store = Ext.create('Ext.data.Store', {
model: 'TemplateModel',
proxy: {
type: 'ajax',
reader: {
type: 'json'
}
}
}); var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="float:left;padding:15px 15px 0px 15px;">', '<table cellspacing=0 cellpadding =0 class="noBorderTable" style="width:150px;border-spacing:0;border-collapse:collapse;border:2px solid #333">', '<tr>',
'<td style="height:25px;color:white;background-color:#333;padding:4px 4px;font-weight:bold;font-size:10pt;text-align:center;vertical-align : middle;">',
'<div style="">{CategoryName}</div>',
'</td>',
'</tr>', '<tr>',
'<td>',
'<img src="ThumbHandler.ashx?path={ImgUrl}&type=mini" style="width:150px;height:90px;border:none;" />',
'</td>',
'</tr>', '<tr>',
'<td>',
'<div style="height:60px;overflow:auto;padding:2px;">',
'<span class="template-name" >[{ApproveState}]{TemplateName},<br/>{TemplateDesc}</span >',
'</div>',
'</td>',
'</tr>', '</table>', '<div style="margin-top:5px;text-align:center;">',
'<input type="button" value="添加" style="font-weight:bold;font-size:10pt;" onClick="OnSelectTemplate({TemplateId},\'{QuoteType}\')"/>',
' <input type="button" value="查看" style="font-weight:bold;font-size:10pt;" onClick="OnShowTemplate({TemplateId},\'{QuoteType}\')" />',
//' <input type="button" value="编辑" style="font-weight:bold;font-size:11pt;" onClick="OnEditTemplate({TemplateId},\'{QuoteType}\')" />',
'{EditBtn}', '</div>', '</div>', '</tpl>',
'<div class="x-clear"></div>'
); //單個模板
var template_view = Ext.create('Ext.view.View', {
id: 'tv1',
store: template_store,
tpl: tpl,
itemSelector: '',
emptyText: '無模板'
}); //模板容器
var templatePanel = Ext.create('Ext.panel.Panel', {
id: 'panel1',
title: '部件模板',
layout: 'fit',
region: 'center',
border: false, autoScroll: true,
bodyStyle: 'overflow-x:hidden; overflow-y:scroll',
items: template_view
}); //取得所有模板
function GetAllTemplate() { template_store.load({
url: uri + 'template/GetAllTemplate',
params: {
flag: isadmin
},
scope: this,
callback: function (records, operation, success) {
if (records == null) return;
for (var i = 0; i < records.length; i++) {
templates.push(records[i].data);
} }
});
} //添加模板
function OnSelectTemplate(tid, quoteType) {
currentSelectedTid = tid;
currentQuoteType = quoteType;
if (tid == 0) {
var includeQ = false;
for (var i = 0; i < products.length; i++) {
if (products[i].Q == quoteType) {
includeQ = true;
break;
}
}
if (!includeQ) {
products.push({
ID: GetProductsMaxID() + 1,
Q: quoteType,
TID: 0,
IC: true,
T: categoryName,
M: '',
JC: '',
OT: ''
});
}
} else {
if (tid == 491 || tid == 390) {
Init_491_390_Html(tid);
}
else {
var include = false;
var template = {
};
for (var i = 0; i < templates.length; i++) {
if (templates[i].TemplateId == tid) {
template = templates[i];
break;
}
}
products.push({
ID: GetProductsMaxID() + 1,
Q: quoteType,
TID: template.TemplateId,
IC: template.IsCustom,
T: template.TemplateName,
M: '',
JC: '',
OT: ''
});
}
}
SelectedTemplate();
}
//取得已選模板最大ID
function GetProductsMaxID() {
var maxid = 1;
for (var i = 0; i < products.length; i++) {
if (products[i].ID > maxid) {
maxid = products[i].ID;
}
};
return maxid;
}; // 抽屜盒或天地盒，選擇部件組成的對話框
var boxPanel = Ext.create('Ext.panel.Panel', {
id: 'boxPanel1',
layout: 'fit',
region: 'center',
border: false,
autoScroll: true,
bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
});
var box_window = Ext.create('widget.window', {
title: '選擇 (按下【ESC鍵】關閉對話框)',
header: {
titlePosition: 2,
titleAlign: 'center'
},
closable: true,
closeAction: 'hide',
width: 250,
minWidth: 250,
height: 250,
modal: true,
layout: {
type: 'border',
padding: 5
},
items: [boxPanel]
});
//模板組成HTML
function Init_491_390_Html(type) {
var t1 = '';
var t2 = ''; if (type == 491) {
t1 = "外盒";
t2 = "抽屜";
} else if (type = 48) {
t1 = "天盒";
t2 = "地盒";
}
var str = "";
str += t1 + "<br />";
str += "<input type='checkbox' id='o1' />" + "有面紙" + "<br />";
str += "<input type='checkbox' id='o2' />" + "有中層" + "<br />";
str += "<input type='checkbox' id='o3' />" + "有襯紙" + "<br />"; str += t2 + "<br />";
str += "<input type='checkbox' id='i1' />" + "有面紙" + "<input type='checkbox' id='im1' />" + "不同于" + t1 + "<br />";
str += "<input type='checkbox' id='i2' />" + "有中層" + "<input type='checkbox' id='im2' />" + "不同于" + t1 + "<br />";
str += "<input type='checkbox' id='i3' />" + "有襯紙" + "<input type='checkbox' id='im3' />" + "不同于" + t1 + "<br />"; str += "<div>";
str += '<input id="boxConfirm" type="button" value="確認" />';
str += ' <input id="boxCancel" type="button" value="取消" />';
str += "</div>";
box_window.show();
Ext.getCmp('boxPanel1').body.update(str);
Init_491_390_Check();
}
//選擇模板組成時的選中事件
function Init_491_390_Check() {
$('#o1').on('change', function () {
if ($(this).prop('checked') == true) {
$('#i1').prop('checked', true)
}
});
$('#o2').on('change', function () {
if ($(this).prop('checked') == true) {
$('#i2').prop('checked', true)
}
});
$('#o3').on('change', function () {
if ($(this).prop('checked') == true) {
$('#i3').prop('checked', true)
}
}); $('#im1').on('change', function () {
if ($(this).prop('checked') == true) {
$('#i1').prop('checked', true)
}
});
$('#im2').on('change', function () {
if ($(this).prop('checked') == true) {
$('#i2').prop('checked', true)
}
});
$('#im3').on('change', function () {
if ($(this).prop('checked') == true) {
$('#i3').prop('checked', true)
}
}); $('#i1').on('change', function () {
if ($(this).prop('checked') == false) {
$('#im1').prop('checked', false)
}
});
$('#i2').on('change', function () {
if ($(this).prop('checked') == false) {
$('#im2').prop('checked', false)
}
});
$('#i3').on('change', function () {
if ($(this).prop('checked') == false) {
$('#im3').prop('checked', false)
}
}); $('#boxConfirm').on('click', function () {
var template = [];
if (currentSelectedTid != 0 && currentQuoteType != '') {
var result = Init_491_390_Result(currentSelectedTid);
for (var i = 0; i < templates.length; i++) {
if (templates[i].TemplateId == currentSelectedTid) {
template = templates[i];
}
} products.push({
ID: GetProductsMaxID() + 1,
Q: currentQuoteType,
TID: template.TemplateId,
IC: template.IsCustom,
T: template.TemplateName,
M: result.m,
JC: result.jc,
OT: 'TC'
}); SelectedTemplate();
box_window.hide();
}
});
$('#boxCancel').on('click', function () {
box_window.hide();
});
}
//取得模板組成選擇結果
function Init_491_390_Result(tid) {
var t1 = '';
var t2 = '';
if (tid == 491) {
t1 = 'Outer';
t2 = 'Drawer';
} else if (tid = 48) {
t1 = 'Lid';
t2 = 'Base';
}
var x1 = t1 + ' Cover';
var x2 = t1 + ' Body';
var x3 = t1 + ' Liner'; var y1 = t2 + ' Cover';
var y2 = t2 + ' Body';
var y3 = t2 + ' Liner'; var z1 = 'Cover';
var z2 = 'Body';
var z3 = 'Liner'; var x = $('#o1').prop('checked');
var y = $('#o2').prop('checked');
var z = $('#o3').prop('checked'); var u = $('#i1').prop('checked');
var v = $('#i2').prop('checked');
var w = $('#i3').prop('checked'); var um = $('#im1').prop('checked');
var vm = $('#im2').prop('checked');
var wm = $('#im3').prop('checked'); var c1 = '';
var b1 = '';
var l1 = ''; var c2 = '';
var b2 = '';
var l2 = ''; var s = "PM||NIL|0"; if (u) {
if (x) {
if (um) {
c1 = x1; c2 = y1;
} else {
c1 = z1;
}
} else {
c2 = y1;
}
} else {
if (x) {
c1 = x1;
}
}
if (v) {
if (y) {
if (vm) {
b1 = x2; b2 = y2;
} else {
b1 = z2;
}
} else {
b2 = y2;
}
} else {
if (y) {
b1 = x2;
}
}
if (w) {
if (z) {
if (wm) {
l1 = x3; l2 = y3;
} else {
l1 = z3;
}
} else {
l2 = y3;
}
} else {
if (z) {
l1 = x3;
}
} var e1 = ((c1 != '') ? c1 + ',' : '') + ((b1 != '') ? b1 + ',' : '') + l1;
var e2 = ((c2 != '') ? c2 + ',' : '') + ((b2 != '') ? b2 + ',' : '') + l2; var m1 = ((c1 != '') ? s + ',' : '') + ((b1 != '') ? s + ',' : '') + ((l1 != '') ? s : '');
var m2 = ((c2 != '') ? s + ',' : '') + ((b2 != '') ? s + ',' : '') + ((l2 != '') ? s : ''); var jc = (e1 != '' ? e1 + ',' : '') + e2;
var m = (m1 != '' ? m1 + ',' : '') + m2; return {
'jc': jc,
'm': m
};
} //查看模板明細容器
var showPanel = Ext.create('Ext.panel.Panel', {
id: 'showPanel1',
layout: 'fit',
height: 350,
border: false,
autoScroll: true,
bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
});
//查看模板明細對話框
var showTemplate_window = Ext.create('widget.window', {
title: '模板明細 (按下【ESC鍵】關閉對話框)',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 350, resizable: false,
items: [showPanel]
});
//點擊查看模板按鈕的事件
function OnShowTemplate(tid, quoteType) {
showTemplate_window.show();
if (tid == 0) {
var html = '';
html += '<p>';
html += quoteType;
html += '</p>';
html += '<p>';
html += categoryName;
html += '</p>';
Ext.getCmp('showPanel1').body.update(html);
}
else {
var t = GetTemplateById(tid);
if (t != null) {
Ext.getCmp('showPanel1').body.update(TemplateDetailHtml(t));
}
}
};
//通過模板ID取得模板對象
function GetTemplateById(tid) {
for (var i = 0; i < templates.length; i++) {
if (templates[i].TemplateId == tid) {
return templates[i];
}
}
}; //var showTemplateImgUrlPanel = Ext.create('Ext.panel.Panel', {
// id: 'panelImage1',
// title: '模板圖片',
// layout: 'fit',
// region: 'center',
// height: 600,
// border: false,
// autoScroll: true,
// bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
//}); var showTemplateImgUrlWindow = Ext.create('widget.window', {
title: '模板圖片 (按下【ESC鍵】關閉對話框)',
closable: true,
closeAction: 'hide',
width: 564,
height: 360,
resizable: false,
modal:true,
items: {
id: 'panelImage1',
height: 360,
autoScroll: true
}
}); function ShowBigImage(imgurl) {
var str = "<img width='550' src='" + imgurl + "'>"; showTemplateImgUrlWindow.show();
Ext.getCmp('panelImage1').body.update(str);
} //查看模板明細HTML
function TemplateDetailHtml(t) {
var str = ''; str += '<table>';
str += '<tr>';
str += '<td style="vertical-align:top;text-align:left;">';
str += '點擊圖片看大圖<br/><br/>';
str += t.ImgUrl == "" ? '<img src="' + "/webquote/Themes/nopic.jpg" : '<a onClick="ShowBigImage(\'' + t.ImgUrl + '\')"><img src="' + "ThumbHandler.ashx?path=" + t.ImgUrl + "&type=big";
str += '" style=""/></a>';
str += '</td>';
str += '<td style="vertical-align:top;text-align:left;padding:10px;width:100%">'; str += "<textarea readonly='readonly' style='width:100%;height:40px;border:1px solid #999;overflow:auto;'>"; str += t.TemplateName;
if (isadmin) str += t.ApproveState == 'Y' ? '[已批核]' : '[未批核]';
if (isadmin) str += '[' + t.TemplateId + ']';
str += "</textarea>"; if (t.TemplateDesc != null && t.TemplateDesc != "") {
str += "<textarea readonly='readonly' style='width:100%;height:40px;border:1px solid #999;overflow:auto;'>";
str += t.TemplateDesc;
str += "</textarea>";
}; if (t.Notes != null && t.Notes != "") {
str += "<textarea readonly='readonly' style='width:100%;height:200px;border:1px solid #999;overflow:auto;'>";
str += t.Notes;
str += "</textarea>";
}; str += '</td>';
str += '</tr>';
str += '</table>';
return str;
}; //编辑模板 var EditTemplateModel = Ext.define('EditTemplateModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'TemplateId', type: 'int'
},
{
name: 'TemplateName'
},
{
name: 'TemplateDesc'
},
{
name: 'Notes'
}
]
}); var editTemplateStore = Ext.create('Ext.data.Store', {
storeId: 'editTemplateStore',
model: 'EditTemplateModel',
autoLoad: false,
proxy: {
type: 'ajax',
url: uri + 'template/GetTemplateById',
reader: {
type: 'json'
}
}
}); function OnEditTemplate(tid, quoteType) {
editTemplate_window.show();
var myStore = Ext.getStore('editTemplateStore');
myStore.load({
params: {
id: tid
},
callback: function (records, operation, success) {
var form = editPanel.getForm();
form.loadRecord(editTemplateStore.last());
}
}); } var editPanel = Ext.create('Ext.form.Panel', {
frame: true,
id: 'editPanel1',
plain: true,
border: 0, bodyPadding: 5,
fieldDefaults: {
labelWidth: 55,
anchor: '100%'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
name: 'TemplateId',
fieldLabel: '模板Id',
hidden: true
}, {
xtype: 'textfield',
name: 'TemplateName',
fieldLabel: '模板名称'
},
{
xtype: 'textareafield',
name: 'TemplateDesc',
fieldLabel: '模板描述',
height: 64
},
{
xtype: 'textareafield',
name: 'Notes',
fieldLabel: '详细描述',
height: 170
}],
buttons: [{
xtype: 'button',
formBind: true,
text: '保存',
handler: function () {
var form = this.up('form').getForm();
form.submit({
clientValidation: false,
url: uri + 'template/Update',
dataType: "json",
scope: this,
//submitEmptyText: false,
success: function (form, action) {
Ext.Msg.alert('消息', '保存成功！可點擊目錄重新加載');
editTemplate_window.hide();
setTimeout(function () {
Ext.Msg.hide()
}, 2000);//5后执行关闭窗口函数
}
,
failure: function (form, action) {
//console.log(action);
//Ext.Msg.alert('消息', '保存失敗！');
switch (action.failureType) {
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Ajax communication failed');
break;
case Ext.form.action.Action.SERVER_INVALID:
//Ext.Msg.alert('Failure', action.result.msg);
editTemplate_window.hide();
Ext.Msg.alert('消息', '保存成功！可點擊目錄重新加載');
setTimeout(function () {
Ext.Msg.hide()
}, 2000);//5后执行关闭窗口函数 }
}
});
}
}, {
xtype: 'button',
formBind: true,
text: '取消',
handler: function () {
editTemplate_window.hide();
}
}]
}); var editTemplate_window = Ext.create('Ext.window.Window', {
title: '编辑 (按下【ESC鍵】關閉對話框)',
closable: true,
closeAction: 'hide',
width: 600,
minWidth: 350,
height: 350,
resizable: false,
items: [editPanel],
//modal: true,
border: false
}); //已選模板的容器
var selectedTemplatePanel = Ext.create('Ext.panel.Panel', {
id: 'panel2',
title: '已選模板',
layout: 'fit',
region: 'center',
height: 600,
border: false,
autoScroll: true,
bodyStyle: 'overflow-x:hidden; overflow-y:scroll'
});
//刪除已選模板
function OnDeleteTemplate(id) {
var temp = []; for (var i = 0; i < products.length; i++) {
if (products[i].ID != id) {
temp.push(products[i]);
}
} products = temp;
SelectedTemplate();
};
//生成已選模板HTML
function SelectedTemplate() {
if (products.length == 0) {
Ext.getCmp('panel2').body.update("");
return;
};
var str = "";
str += "<table class='selected-list-style'>";
for (var i = 0; i < products.length; i++) {
str += "<tr>";
str += "<td style='width:140px;overflow:hidden;'>";
str += products[i].T;
str += "</td>";
str += '<td><input class="deleteSelectedTemplate" type="button" id="' + products[i].ID + '" style="width:40px;padding:2px;" value="刪除"/>';
str += "</tr>";
}
str += "<tr>"; str += "<td colspan='2' style='text-align:center;'>";
str += '<input id="CreateIQ" type="button" value="新建請求單" style="color:black;font-weight:bold;font-size:10pt;" /> ';
str += '<input id="ClearSelection" type="button" value="清空" style="color:black;font-weight:bold;font-size:10pt;" />';
str += "</td>" str += "</tr>"; str += "</table>";
Ext.getCmp('panel2').body.update(str); $('.deleteSelectedTemplate').click(function () {
var pid = $(this).attr('id');
OnDeleteTemplate(pid);
}); $('#CreateIQ').click(function () {
Create();
});
$('#ClearSelection').click(function () {
products = [];
Ext.getCmp('panel2').body.update("");;
});
}; //創建IQ單
function Create() { var suitInfos = new Array();
for (var i = 0, len = products.length; i < len; i++) {
suitInfos = suitInfos.concat(products[i])
}
if (suitInfos.length == 0) {
alert('您至少要選擇一個產品!')
return false
} else {
var j = JSON.stringify(suitInfos); //var str = encodeURIComponent(j);
PostSubmit("/Custom.aspx", j);
}
};
//用post的方法頁面間傳值，跳轉到指定頁面
function PostSubmit(url, para) {
var postUrl = url;//提交地址
var _para = para;//数据
var ExportForm = document.createElement("FORM");
document.body.appendChild(ExportForm);
ExportForm.method = "POST";
var newElement = document.createElement("input");
newElement.setAttribute("name", "suitinfo");
newElement.setAttribute("type", "hidden");
ExportForm.appendChild(newElement);
newElement.value = _para;
ExportForm.action = postUrl;
ExportForm.target = "_blank";
ExportForm.submit();
document.body.removeChild(ExportForm);
}; Ext.onReady(function () { var viewport = Ext.create('Ext.Viewport', {
layout: 'border',
items: [
{
id: 'category',
region: 'west',
split: true,
width: 180,
minWidth: 100,
maxWidth: 200,
layout: 'fit',
margin: '5 0 5 5',
items: [treePanel]
},
{
region: 'center',
layout: 'fit',
margin: '5 5 5 0',
items: [templatePanel]
},
{
region: 'east',
width: 210,
margin: '5 5 5 0',
layout: 'fit',
items: [selectedTemplatePanel]
}
]
}); LoadTree(); });
Default.js
Ext js 应用例子的更多相关文章
- sencha ext js 6 入门
Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 YUI-Ext的作者J ...
- Ext JS - 问答
Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...
- Ext JS 4 老特征：statics 静态的变量和方法
l 一.静态的变量和静态的方法 [译文原创Learning Ext JS 4 第51页] Statics的方法只属于类本身,而不属于任何一个实例,这就决定了我们是在定义类的内部来用statics方 ...
- Ext JS 4 新特性2：配置项属性（config）之二
Ext JS 4 新特征2:配置项属性config之二 ☞ Config(自动的setters和getters) Ext JS 4介绍了config声明方式,在Ext JS 中也有几个例子:在运行程序 ...
- 在Ext JS 5应用程序中如何使用路由
简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它 ...
- Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法
Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...
- 【转载】《Ext JS 4 First Look》翻译之一：新特性
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:^_^肥仔John 原文地址:http://www.cnblogs. ...
- [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
引言 贴一个grid 的例子先: 有这样一个需求: 1. 给 Grid(or Tree Grid)添加一列, 这一列显示是Button. 点击之后可以对这一行进行一些操作 2. 这一列每一行对应的按钮 ...
- [Ext JS 4] 实战之Grid, Tree Gird编辑Cell
前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...
随机推荐
- unity下的Line of Sight(LOS)的绘制
先说说什么是Linf of Sight.在很多RTS游戏中,单位与单位之间的视野关系经常会受到障碍物遮挡.Line of Sight指的就是两个物体之间是否没有障碍物遮挡. 比如在dota中,玩家的视 ...
- bzoj 1051 tarjan强连通分量
2013-11-16 11:39 原题传送门http://www.lydsy.com/JudgeOnline/problem.php?id=1051 强连通分量,缩完点之后看出度为0的强连通分量有几个 ...
- pyhton发送邮件
# import smtplib # from email.mime.text import MIMEText # _user = "你的qq邮箱" # _pwd = " ...
- linux下源码安装netcat
linux下源码安装netcat http://blog.chinaunix.net/uid-20783755-id-4211230.html 1,下载netcat源码,netcat-0.7.1-13 ...
- hibernate基础学习
转载自:http://blog.csdn.net/fb281906011/article/details/17628111 一:下载hibernate:http://hibernate.org/orm ...
- 无向图Tarjan&&求树直径
Tarjan可以用来求无向图的割点和割边 割边:\(dfn[u]<low[v]\) 割点:\(low[v]>=dfn[u]\) 求树的直径 做法1:BFS 从任意一个点开始BFS,然后找到 ...
- python批量下载图片3
import urllib.request import os def url_open(url): req = urllib.request.Request(url) req.add_header( ...
- c#读取LOG文件并解决读取提示被其他进程占用问题
c# 读写文件时文件正由另一进程使用,因此该进程无法访问该文件,在IO处理上遇到了无法操作的问题. 文件“C:\u_ex.log”正由另一进程使用,因此该进程无法访问该文件. u_ex.log是一个日 ...
- 部署web应用到虚拟主机的三种方式
方式一: 在 [tomcat]/conf/server.xml 文件中的<Engine>标签下的<Host>标签内部, 添加一个 <Context ...
- (24)python 无线破解
import pywifi import time wifi = pywifi.PyWiFi() # iface = wifi.interfaces()[0]#获取第一块网卡 #print(iface ...