EXT表单
ETX系列：
EXT基础
EXT表单
EXT表格
EXT事件
EXT窗口
EXT按钮事件
纯表单
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form1 = new Ext.form.FormPanel({
title:'综合查询',
applyTo:'search_form',
frame:false,
items: [{
}]
});
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
<div id='search_form'></div>
</body>
</html>
注意：frame:false,和frame:true的差异
基本表单
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form1 = new Ext.form.FormPanel({
title:'综合查询',
applyTo:'search_form',
frame:true,
items: [{
xtype: 'textfield',
fieldLabel: '名称',
name: 'title'
},{
xtype: 'textfield',
fieldLabel: '内容',
name: 'director'
}],
buttons:[{
text:'开始查询',
handler:function(){
doSearch();
}
}]
});
var doSearch=function()
{
Ext.Msg.alert('提示','操作已经成功');
}
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
<div id='search_form'></div>
</body>
</html>
表单跳转：
var doSearch=function() { //Ext.Msg.alert('提示','操作已经成功'); location.href ='d.php'; }
表单元素设置ID以及获取
设置id
items: [{ xtype: 'textfield', fieldLabel: '名称', name: 'title', id:'tt' },
获取id:
Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);
完整代码
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form1 = new Ext.form.FormPanel({
title:'综合查询',
applyTo:'search_form',
frame:true,
items: [{
xtype: 'textfield',
fieldLabel: '名称',
name: 'title',
id:'tt'
},
{
xtype: 'textfield',
fieldLabel: '内容',
name: 'director'
}],
buttons:[{
text:'开始查询',
handler:function(){
doSearch();
}
}]
});
var doSearch=function()
{
Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);
}
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
<div id='search_form'></div>
</body>
</html>
如果不设置id系统会默认给其id
注释// id:'tt'
比较就明白了
获取文本框内容
Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").value);
或者
Ext.get('title').getValue()
声明示定义文本框以及获取值
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var txtAccount = new Ext.form.TextField({
width:120,fieldLabel:'用户名'
});
var form1 = new Ext.form.FormPanel({
title:'综合查询',
applyTo:'search_form',
frame:true,
items: [{
xtype: 'textfield',
fieldLabel: '名称',
name: 'title'
},
{columnWidth:.5,layout: 'form',
items: [txtAccount]
},
{
xtype: 'textfield',
fieldLabel: '内容',
name: 'director'
}],
buttons:[{
text:'开始查询',
handler:function(){
doSearch();
}
}]
});
var doSearch=function()
{
//Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);
Ext.Msg.alert('提示','操作已经成功'+txtAccount.getValue());
}
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
<div id='search_form'></div>
</body>
</html>
定义单选框以及获取选中
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var txtAccount = new Ext.form.TextField({
width:120,fieldLabel:'用户名'
});
var checkFlag = new Ext.form.Checkbox({boxLabel:'是',fieldLabel:'是否选择',value:1});
var form1 = new Ext.form.FormPanel({
title:'综合查询',
applyTo:'search_form',
frame:true,
items: [{
xtype: 'textfield',
fieldLabel: '名称',
name: 'title'
},
{columnWidth:.5,layout: 'form',
items: [txtAccount]
},
{columnWidth:.5,layout: 'form',
items: [checkFlag]
},
{
xtype: 'textfield',
fieldLabel: '内容',
name: 'director'
}],
buttons:[{
text:'开始查询',
handler:function(){
doSearch();
}
}]
});
var doSearch=function()
{
//Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);
//Ext.Msg.alert('提示','操作已经成功'+txtAccount.getValue());
var rejectFlag =0;
if(checkFlag.checked==true)
{
rejectFlag=1;
}
Ext.Msg.alert('提示','操作已经成功'+rejectFlag);
}
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
<div id='search_form'></div>
</body>
</html>
下拉框绑定以及获取选中值
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var txtAccount = new Ext.form.TextField({
width:120,fieldLabel:'用户名'
});
var checkFlag = new Ext.form.Checkbox({boxLabel:'是',fieldLabel:'是否选择',value:1});
var DeptDs = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method:'post',
url: 'd.php',
params:{test:'load'}
}),
autoLoad:true,
reader:new Ext.data.JsonReader({
root : 'data',id:'dddd',
totalProperty : 'totalCount'
}, [{name : 'value'},{name : 'text'}])
});
var comboDepts = new Ext.form.ComboBox({
store:DeptDs,
valueField :"value",
displayField: "text",id:'value',
mode: 'local',allowBlank:true,
emptyText:'选择省份.....',width:220,fieldLabel: '省份',
blankText:'选择省份',
editable: true,anyMatch:true,tabIndex:4,
triggerAction: 'all'
});
var form1 = new Ext.form.FormPanel({
title:'综合查询',
applyTo:'search_form',
frame:true,
items: [{
xtype: 'textfield',
fieldLabel: '名称',
name: 'title'
},
{columnWidth:.5,layout: 'form',
items: [txtAccount]
},
{columnWidth:.5,layout: 'form',
items: [checkFlag]
},
{columnWidth:.5,layout: 'form',
items: [comboDepts]
},
{
xtype: 'textfield',
fieldLabel: '内容',
name: 'director'
}],
buttons:[{
text:'开始查询',
handler:function(){
doSearch();
}
}]
});
var doSearch=function()
{
//Ext.Msg.alert('提示','操作已经成功'+Ext.getDom("title").id);
//
//Ext.Msg.alert('提示','操作已经成功'+txtAccount.getValue());
//Ext.Msg.alert('提示','操作已经成功'+Ext.get('title').getValue());
Ext.Msg.alert('提示','操作已经成功'+comboDepts.getValue());
}
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
<div id='search_form'></div>
</body>
</html>
d.php返回的数据
{"success":true,"data":[
{"value":"010","text":"北京"},
{"value":"021","text":"上海"}
]}
ajax提交表单数据
<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script src="extjs/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var simple = new Ext.FormPanel({
labelWidth: 75,
baseCls: 'x-plain',
defaults: {width: 150},
defaultType: 'textfield',
items: [{
fieldLabel: '帐户',
name: 'name',
allowBlank:false,
blankText:'帐户不能为空'
},{
inputType:'password',
fieldLabel: '密码',
name: 'pwd',
allowBlank:false,
blankText:'密码不能为空'
}
],
buttons: [{
text: '登录系统',
type: 'submit',
handler:function(){
if(simple.form.isValid()){
//ExtJs Ajax表单提交
simple.form.doAction('submit',{
url:'d1.php',
method:'post',
params:'',
success:function(result,request){
//alert(action.result.msg);
Ext.Msg.alert('操作成功',request.result.data);//json是什么这里就是什么
},
failure:function(){
Ext.Msg.alert('警告', '未知的失败原因！');
}
});
}
}
}]
});
win = new Ext.Window({
id:'win',
title:'用户登陆',
layout:'fit',
width:300,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,
closeAction:'close',
closable:false,
collapsible:true,
plain: true,
buttonAlign:'center',
items:simple
});
win.show();
});
</script>
</head>
</head>
<body>
<div id="hello"></div>
</body>
</html>
验证的d.php页面
<?php $arr = array( 'success' => 'true', 'data' => '1001111111111111111111111' ); $json_string = json_encode($arr); echo $json_string; ?>
说明：
必须返回json的格式切要有success,类似这样的：
("{success:true,info:'1001111111111111111111111!'}");
=========================================
//ExtJs 表单提交
form.getForm().submit({
success:function(){
},
failure:function(){
}
});
//ExtJs Ajax表单提交
form.form.doAction('submit', {
url : 'user.do?method=login',
method : 'post',
// 如果有表单以外的其它参数，可以加在这里。我这里暂时为空，也可以将下面这句省略
params : '',
// 第一个参数是传入该表单，第二个是Ext.form.Action对象用来取得服务器端传过来的json数据
success : function(form, action) {
Ext.Msg.alert('操作', action.result.data); //result为json对象
this.disabled = false;
},
failure : function(form, action) {
Ext.Msg.alert('警告', '用户名或密码错误！');
// 登录失败，将提交按钮重新设为可操作
this.disabled = false;
}
});
//ExtJs Ajax普通提交
Ext.Ajax.request({
url: 'login.do', //请求地址
//提交参数组
params: {
form.getForm().getValues() //取出表单所有值
},
//成功时回调
success: function(response, options) {
//获取响应的json字符串
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success==true){
Ext.Msg.alert('恭喜','您已成功登录！');
} else{
Ext.Msg.alert('失败','登录失败，请重新登录');
}
}
});
//老grid
var myData = ${jobs}; //二维数组
var store = new Ext.data.ArrayStore({
fields: [
{name: 'group'},
{name: 'name'},
{name: 'description'},
{name: 'jobClass'},
{name: 'namegroup'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
title:"<fmt:message key='title.listAllJobs'/>",
store: store,
width:all_width,
autoHeight : true,
autoExpandColumn : 'namegroup',
viewConfig : {
forceFit : true
},
stripeRows: true,
columns: [
{header: "<fmt:message key='label.job.group'/>", width: 140, sortable: true, dataIndex: 'group'},
{header: "<fmt:message key='label.job.name'/>", width: 140, sortable: true, dataIndex: 'name'},
{header: "<fmt:message key='label.job.description'/>", width: 180, sortable: true, dataIndex: 'description'},
{header: "<fmt:message key='label.job.jobClass'/>", width: 200, sortable: true, dataIndex: 'jobClass'},
{id : 'namegroup',header: "<fmt:message key='label.global.actions'/>", dataIndex: 'namegroup', renderer: change}
],
bbar: new Ext.PagingToolbar({ afterPageText: '/ {0}',beforePageText: '页',firstText: '第一页'
,prevText: '前一页',nextText: '后一页',lastText: '最后一页',refreshText: '刷新',store: store
, pageSize: 20,displayInfo: true, displayMsg: '显示 {0} - {1} 条记录，共 {2} 条', emptyMsg: "没有数据"})
});
//如果store设置了url属性，可重新指定url的参数:
store.load({params:{a:1, b:2}});
//如果store的内容只是普通的数组：
store.loadData([...]);
//如果store没有单独的变量定义，可以用
comboBox.initialConfig.store
//或
Ext.getCmp('comboId').initialConfig.store
//窗口
var win;
win = new Ext.Window({//添加/修改菜单弹出窗口
id:'winId',
title:'',
width: '',
height:'',
layout: 'fit',
modal:true,
closeAction:'hide',
buttonAlign:'center',
resizable:false,
items: [grid],
listeners:{
'hide':function(){}
}
});
Ext.getCmp('winId').show();
listeners:{
render:function(){},
click:function(a,e){}
}
//按钮
var button = new Ext.Button({
text:'查询',
listeners:{click:function(a,e){
}}
})
//表单
var form = new Ext.FormPanel({
id:'form',
width: '',
height:42,
labelWidth: '', //标签宽度
layout:'column', //分列
style:'padding:4 4 2 4',
defaults:{layout:'form'}, //子项默认使用form样式
colspan:2,
frame:true,
submit: function(){
this.getEl().dom.action = '${pageContext.request.contextPath}/layout.table?method=addData'; //连接到服务器的url地址
this.getEl().dom.method = 'post';
this.getEl().dom.submit();
},
items:[
{
columnWidth:.17,
items: [{
xtype:'label',
text:'',
emptyText:'',
allowBlank:false,
blankText:'',
regex:/^[A-Za-z0-9]+$/,
regexText:'',
maxLength:20,
maxLengthText:''
}]
},{
columnWidth:.04,
items: [button]
}]
});
//form.getForm().isValid()
//表格
var table = new Ext.Panel({
renderTo:'content',
layout:'table',
width:'',
border:false,
layoutConfig: {columns:2}, //划分两列
bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',
defaults: {frame:true}, //填充文本背景颜色
items:[form,chart,grid]
})
//标签页
var tabs = new Ext.TabPanel({
resizeTabs:true, // tab宽度自动调整
minTabWidth: 115, //tab最小宽度值
tabWidth:135, //tab初始宽度
enableTabScroll:true,//tab超出范围出现横向滚动条
frame:true,
activeTab:0,
defaults: {bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6'},
items:[{
id:'tab1_1',
title:'',
items:[chart1] //添加table
},{
id:'tab1_2',
title:'',
items:[chart1]
}]
});
var tools = [{
id:'gear',
qtip :'为表单分配权限',
handler: function(e, target, panel){
//获得grid中所选的表单编号（即id值）
sRows = grid.getSelections('id_');
if(sRows==null)
{
Ext.Msg.show({
title:'提示',
msg: '<b>请选择表单后再分配权限!</b>',
buttons: {ok:'确定'},
icon: Ext.MessageBox.INFO,
maxWidth :300,
minWidth :300,
closable:false,
defaultTextHeight :100
});
return;
}
}
}]
//框架面板
var border = new Ext.Panel({
layout:'border',
renderTo:'content',
width:'',
height:'',
items:[{
region:'north',
xtype:'panel',
margins: '4 4 2 4',
height:42,
bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',
items:[form]
},{
region:'west',
id:'west-panel',
width: '',
style:'padding:2 2 4 4',
collapsible: true,
defaults:{border:false},
layoutConfig:{
animate:true
},
items: [tree]
},{
region:'center',
style:'padding:2 4 4 2',
border:false,
items:[tabs]
}]
});
//日期控件
var dateSign_start = new Ext.form.DateField({
value:startTime,
format:"Y-m",
fieldLabel:'开始时间',
listeners:{
change:function(){
}
}
});
//下拉列表
//静态
var fields=["name","valtext"];
var data_branchCompany=[['01','1月'],['02','2月']];
var store_branchCompany = new Ext.data.SimpleStore({
fields:fields,
data:data_month
});
//动态
var dsUrl_branchCompany ="${pageContext.request.contextPath}/adapter2Table.table?key=branchCompany&dropdownlist=true";
var store_branchCompany = new Ext.data.Store({
url:dsUrl_branchCompany,
autoLoad: true,
reader: new Ext.data.JsonReader({},[
//设置如何解析
{name:'name'},
{name:'valtext'}
])
,listeners:{
"load":function()
{
}
}
});
var comboBox_branchCompany = new Ext.form.ComboBox({
id:'comboBox_branchCompanyId',
width: 75,
selectOnFocus : true,
allowBlank:false,
readOnly:true,
emptyText: '',
fieldLabel:'',
store:store_branchCompany,
triggerAction: "all", //不加该语句选中某项后
mode: "local", //动态需要
displayField: "name",
valueField: "valtext",
listeners: {
"select": function (combo,record,index){
//record.get("name");
}
}
});
//隐藏div
type.on("select",function(combo,record,index){
if(record.get('valtext') == 0){
}
});
//树
var tree = new Ext.tree.TreePanel({
id:'tree',
border: false,
containerScroll: true,
enableDD:false,//设置是否允许拖拽
useArrows: false,//是否使用箭头记号,默认为false
rootVisible :true,//设置是否显示根节点
autoScroll:true,
loader: new Ext.tree.TreeLoader({
dataUrl: '${pageContext.request.contextPath}/treeQuery.tree?method=queryNode&key=product_order',
listeners:{beforeload:function(treeLoader, node) {
this.baseParams.id = node.id;
}}
}),
root: {
nodeType: 'async',
text: '付费节目',
draggable: false,
id: '1'
},
listeners:{
click:function(node,ev){
id=node.id;
}
}
});
tree.getRootNode().expand();
tree_org.on("append",function(tree,parentNode,node,index)
{
for(var i=0,len=roles.length;i<len;i++)
{
if(roles[i].编号 == node.id)
{
node.attributes.checked=true;
break;
}
}
});
//滑动菜单
{
region:'west',
id:'west-panel',
title:'West',
width: 200,
style:'padding:4 2 4 4',
collapsible: true,
layout:'accordion',
defaults:{border:false},
layoutConfig:{
animate:true
},
items: [{
title:'菜单1',
items:[tree]
},{
title:'菜单2',
contentEl:'hw'
}]
}
//表单中控件
{
fieldLabel: '性别',
xtype:'radiogroup',
items:[{
boxLabel:'男',
name: 'SEX_',
value:"${SEX_}",
checked:true,
inputValue: 1
},{
boxLabel:'女',
name: 'SEX_',
inputValue: 2
}]
},{
fieldLabel: 'SHOURU',
xtype:'checkboxgroup',
items:[{
boxLabel:'SHOURU1',
name: 'SHOURU',
checked:true,
inputValue: 1
},{
boxLabel:'SHOURU2',
name: 'SHOURU',
inputValue: 2
},{
boxLabel:'SHOURU3',
name: 'SHOURU',
inputValue: 3
}]
},{
xtype:'field',
inputType:'file',
name:'SHUISHOU',
fieldLabel:'上传'
},{
xtype:'textfield',
name:"",
hidden:true,
hideMode:"display",
hideLabel:true,
value:""
},{
frame:false,border:false,baseCls:'x-plain',items:[{
xtype:'htmleditor',
id:'id_htmleditor',
width:500,
height:350,
name:'rulecontent_',
fieldLabel:'规则信息'
}]}
//Ext dom操作
Ext.getDom('')//返回Js对象
Ext.getCmp('').getValue();
Ext.getCmp("org-tree-panel").getChecked("id");//获得树节点
Ext.getCmp('form').form.findField("name").setValue('1',true);
Ext.getCmp('form').form.findField('name').getValue().inputValue;//radio选中值
grid.getSelections('列名');//获得选中
//checkbox选中值
var checkbox = Ext.getCmp('form').form.findField('name');
if(checkbox.items.get(i).checked){
checkbox.items.get(i).inputValue;
}
form.getForm().submit({
success:function(){
},
failure:function(){
}
});
//ExtJs Ajax表单提交
form.form.doAction('submit', {
url : 'user.do?method=login',
method : 'post',
// 如果有表单以外的其它参数，可以加在这里。我这里暂时为空，也可以将下面这句省略
params : '',
// 第一个参数是传入该表单，第二个是Ext.form.Action对象用来取得服务器端传过来的json数据
success : function(form, action) {
Ext.Msg.alert('操作', action.result.data); //result为json对象
this.disabled = false;
},
failure : function(form, action) {
Ext.Msg.alert('警告', '用户名或密码错误！');
// 登录失败，将提交按钮重新设为可操作
this.disabled = false;
}
});
//ExtJs Ajax普通提交
Ext.Ajax.request({
url: 'login.do', //请求地址
//提交参数组
params: {
form.getForm().getValues() //取出表单所有值
},
//成功时回调
success: function(response, options) {
//获取响应的json字符串
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success==true){
Ext.Msg.alert('恭喜','您已成功登录！');
} else{
Ext.Msg.alert('失败','登录失败，请重新登录');
}
}
});
//老grid
var myData = ${jobs}; //二维数组
var store = new Ext.data.ArrayStore({
fields: [
{name: 'group'},
{name: 'name'},
{name: 'description'},
{name: 'jobClass'},
{name: 'namegroup'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
title:"<fmt:message key='title.listAllJobs'/>",
store: store,
width:all_width,
autoHeight : true,
autoExpandColumn : 'namegroup',
viewConfig : {
forceFit : true
},
stripeRows: true,
columns: [
{header: "<fmt:message key='label.job.group'/>", width: 140, sortable: true, dataIndex: 'group'},
{header: "<fmt:message key='label.job.name'/>", width: 140, sortable: true, dataIndex: 'name'},
{header: "<fmt:message key='label.job.description'/>", width: 180, sortable: true, dataIndex: 'description'},
{header: "<fmt:message key='label.job.jobClass'/>", width: 200, sortable: true, dataIndex: 'jobClass'},
{id : 'namegroup',header: "<fmt:message key='label.global.actions'/>", dataIndex: 'namegroup', renderer: change}
],
bbar: new Ext.PagingToolbar({ afterPageText: '/ {0}',beforePageText: '页',firstText: '第一页'
,prevText: '前一页',nextText: '后一页',lastText: '最后一页',refreshText: '刷新',store: store
, pageSize: 20,displayInfo: true, displayMsg: '显示 {0} - {1} 条记录，共 {2} 条', emptyMsg: "没有数据"})
});
//如果store设置了url属性，可重新指定url的参数:
store.load({params:{a:1, b:2}});
//如果store的内容只是普通的数组：
store.loadData([...]);
//如果store没有单独的变量定义，可以用
comboBox.initialConfig.store
//或
Ext.getCmp('comboId').initialConfig.store
//窗口
var win;
win = new Ext.Window({//添加/修改菜单弹出窗口
id:'winId',
title:'',
width: '',
height:'',
layout: 'fit',
modal:true,
closeAction:'hide',
buttonAlign:'center',
resizable:false,
items: [grid],
listeners:{
'hide':function(){}
}
});
Ext.getCmp('winId').show();
listeners:{
render:function(){},
click:function(a,e){}
}
//按钮
var button = new Ext.Button({
text:'查询',
listeners:{click:function(a,e){
}}
})
//表单
var form = new Ext.FormPanel({
id:'form',
width: '',
height:42,
labelWidth: '', //标签宽度
layout:'column', //分列
style:'padding:4 4 2 4',
defaults:{layout:'form'}, //子项默认使用form样式
colspan:2,
frame:true,
submit: function(){
this.getEl().dom.action = '${pageContext.request.contextPath}/layout.table?method=addData'; //连接到服务器的url地址
this.getEl().dom.method = 'post';
this.getEl().dom.submit();
},
items:[
{
columnWidth:.17,
items: [{
xtype:'label',
text:'',
emptyText:'',
allowBlank:false,
blankText:'',
regex:/^[A-Za-z0-9]+$/,
regexText:'',
maxLength:20,
maxLengthText:''
}]
},{
columnWidth:.04,
items: [button]
}]
});
//form.getForm().isValid()
//表格
var table = new Ext.Panel({
renderTo:'content',
layout:'table',
width:'',
border:false,
layoutConfig: {columns:2}, //划分两列
bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',
defaults: {frame:true}, //填充文本背景颜色
items:[form,chart,grid]
})
//标签页
var tabs = new Ext.TabPanel({
resizeTabs:true, // tab宽度自动调整
minTabWidth: 115, //tab最小宽度值
tabWidth:135, //tab初始宽度
enableTabScroll:true,//tab超出范围出现横向滚动条
frame:true,
activeTab:0,
defaults: {bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6'},
items:[{
id:'tab1_1',
title:'',
items:[chart1] //添加table
},{
id:'tab1_2',
title:'',
items:[chart1]
}]
});
var tools = [{
id:'gear',
qtip :'为表单分配权限',
handler: function(e, target, panel){
//获得grid中所选的表单编号（即id值）
sRows = grid.getSelections('id_');
if(sRows==null)
{
Ext.Msg.show({
title:'提示',
msg: '<b>请选择表单后再分配权限!</b>',
buttons: {ok:'确定'},
icon: Ext.MessageBox.INFO,
maxWidth :300,
minWidth :300,
closable:false,
defaultTextHeight :100
});
return;
}
}
}]
//框架面板
var border = new Ext.Panel({
layout:'border',
renderTo:'content',
width:'',
height:'',
items:[{
region:'north',
xtype:'panel',
margins: '4 4 2 4',
height:42,
bodyStyle:'background:#dfe8f6;border: 1px solid #dfe8f6',
items:[form]
},{
region:'west',
id:'west-panel',
width: '',
style:'padding:2 2 4 4',
collapsible: true,
defaults:{border:false},
layoutConfig:{
animate:true
},
items: [tree]
},{
region:'center',
style:'padding:2 4 4 2',
border:false,
items:[tabs]
}]
});
//日期控件
var dateSign_start = new Ext.form.DateField({
value:startTime,
format:"Y-m",
fieldLabel:'开始时间',
listeners:{
change:function(){
}
}
});
//下拉列表
//静态
var fields=["name","valtext"];
var data_branchCompany=[['01','1月'],['02','2月']];
var store_branchCompany = new Ext.data.SimpleStore({
fields:fields,
data:data_month
});
//动态
var dsUrl_branchCompany ="${pageContext.request.contextPath}/adapter2Table.table?key=branchCompany&dropdownlist=true";
var store_branchCompany = new Ext.data.Store({
url:dsUrl_branchCompany,
autoLoad: true,
reader: new Ext.data.JsonReader({},[
//设置如何解析
{name:'name'},
{name:'valtext'}
])
,listeners:{
"load":function()
{
}
}
});
var comboBox_branchCompany = new Ext.form.ComboBox({
id:'comboBox_branchCompanyId',
width: 75,
selectOnFocus : true,
allowBlank:false,
readOnly:true,
emptyText: '',
fieldLabel:'',
store:store_branchCompany,
triggerAction: "all", //不加该语句选中某项后
mode: "local", //动态需要
displayField: "name",
valueField: "valtext",
listeners: {
"select": function (combo,record,index){
//record.get("name");
}
}
});
//隐藏div
type.on("select",function(combo,record,index){
if(record.get('valtext') == 0){
}
});
//树
var tree = new Ext.tree.TreePanel({
id:'tree',
border: false,
containerScroll: true,
enableDD:false,//设置是否允许拖拽
useArrows: false,//是否使用箭头记号,默认为false
rootVisible :true,//设置是否显示根节点
autoScroll:true,
loader: new Ext.tree.TreeLoader({
dataUrl: '${pageContext.request.contextPath}/treeQuery.tree?method=queryNode&key=product_order',
listeners:{beforeload:function(treeLoader, node) {
this.baseParams.id = node.id;
}}
}),
root: {
nodeType: 'async',
text: '付费节目',
draggable: false,
id: '1'
},
listeners:{
click:function(node,ev){
id=node.id;
}
}
});
tree.getRootNode().expand();
tree_org.on("append",function(tree,parentNode,node,index)
{
for(var i=0,len=roles.length;i<len;i++)
{
if(roles[i].编号 == node.id)
{
node.attributes.checked=true;
break;
}
}
});
//滑动菜单
{
region:'west',
id:'west-panel',
title:'West',
width: 200,
style:'padding:4 2 4 4',
collapsible: true,
layout:'accordion',
defaults:{border:false},
layoutConfig:{
animate:true
},
items: [{
title:'菜单1',
items:[tree]
},{
title:'菜单2',
contentEl:'hw'
}]
}
//表单中控件
{
fieldLabel: '性别',
xtype:'radiogroup',
items:[{
boxLabel:'男',
name: 'SEX_',
value:"${SEX_}",
checked:true,
inputValue: 1
},{
boxLabel:'女',
name: 'SEX_',
inputValue: 2
}]
},{
fieldLabel: 'SHOURU',
xtype:'checkboxgroup',
items:[{
boxLabel:'SHOURU1',
name: 'SHOURU',
checked:true,
inputValue: 1
},{
boxLabel:'SHOURU2',
name: 'SHOURU',
inputValue: 2
},{
boxLabel:'SHOURU3',
name: 'SHOURU',
inputValue: 3
}]
},{
xtype:'field',
inputType:'file',
name:'SHUISHOU',
fieldLabel:'上传'
},{
xtype:'textfield',
name:"",
hidden:true,
hideMode:"display",
hideLabel:true,
value:""
},{
frame:false,border:false,baseCls:'x-plain',items:[{
xtype:'htmleditor',
id:'id_htmleditor',
width:500,
height:350,
name:'rulecontent_',
fieldLabel:'规则信息'
}]}
//Ext dom操作
Ext.getDom('')//返回Js对象
Ext.getCmp('').getValue();
Ext.getCmp("org-tree-panel").getChecked("id");//获得树节点
Ext.getCmp('form').form.findField("name").setValue('1',true);
Ext.getCmp('form').form.findField('name').getValue().inputValue;//radio选中值
grid.getSelections('列名');//获得选中
//checkbox选中值
var checkbox = Ext.getCmp('form').form.findField('name');
if(checkbox.items.get(i).checked){
checkbox.items.get(i).inputValue;
}