Ext真的强大,所以选择来做后台,在做一个权限时发现了一个问题,也不知道是不是BUG,如果有遇到同样的问题,请指教,3Q
在说明问题之前,先说下我怎么写的Ext,我做采用JS调用,所有JS都是动态加载,就是菜单点击时才加载一个JS(通过网上的Ext.ux.JSLoader,小有改动);
动态加载的好处自认为可以解决在不影响第一次打开加载过多JS而造成的问题,在加载JS到TabPanel后,如果再点同样菜单是不会再加载JS的,脚本做了判断(这个很重要,后面的问题可以排除是多次加载造成的);
下面是问题: Ext.form.FormPanel在加载后出现反复加载items中的控件,而且加载不全,有的没了有的又多了;第一次加载有FormPanel的js,都是正常的,如果再加载一次就会出问题如图那样的反复加载items中的内容;
感觉数据库来的数据不会有问题,道是加到formpanel的静态控件checkbox有问题
permission = function(node) {
var checkall = new Ext.form.Checkbox({ id: 'checkall', name: 'checkall', fieldLabel: '功能名称', boxLabel: '全选', inputValue: true,
handler: function() {
if (this.checked) {
Ext.select('input[name^=cbopitem]').each(function() { this.checked = true; });
} else {
Ext.select('input[name^=cbopitem]').each(function() { this.checked = false; });
}
}
});
var form = new Ext.form.FormPanel({
id: 'roleopform',
title: '当前位置:角色管理 > ' + node.text,
border: false,
plain: true,
layout: "form",
buttonAlign: 'center',
bodyStyle: 'padding:0 10px 0;',
items: [checkall],
buttons: [{
text: '保存',
handler: function() {
if (form.getForm().isValid()) {
Ext.MessageBox.show({ title: '提示框', msg: '你确定要修改吗?', buttons: Ext.MessageBox.OKCANCEL, icon: Ext.MessageBox.WARNING,
fn: function(btn) {
if (btn == 'ok') {
form.getForm().submit({
waitMsg: "数据保存中...",
title: "请稍侯",
url: '/sys/permissionsave',
params: { id: node.attributes.id },
success: function(form, response) {
var temp = Ext.util.JSON.decode(response.response.responseText);
Ext.Msg.alert("系统提示!", temp.msg);
},
failure: function(form, response) {
Ext.MessageBox.alert("提示!", "保存信息失败!");
}
});
}
}
});
}
}
}, {
text: '取消',
handler: function() {
form.getForm().reset();
}
}
]
});
//加载角度权限
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("POST", '/sys/permission/' + node.attributes.id, false);
conn.send(null);
var perJson = Ext.util.JSON.decode(conn.responseText);
//加载功能
var checklist = [];
conn.open("POST", '/sys/loadappselect', false);
conn.send(null);
var respText = Ext.util.JSON.decode(conn.responseText);
Ext.each(respText, function(item) {
var id = item.ID;
var path = item.Path;
var name = item.Name;
name = GetCategoryPath(path, '|') + name;
var checkGroup = [];
//加载功能操作
conn.open("POST", '/sys/operation/' + id, false);
conn.send(null);
var respText1 = Ext.util.JSON.decode(conn.responseText);
Ext.each(respText1, function(item1) {
//加载功能操作是否设置字段
conn.open("POST", '/sys/field/' + item1.ID, false);
conn.send(null);
var respField = Ext.util.JSON.decode(conn.responseText);
var opname = item1.Operation;
if (respField.length > 0) opname += '(<a href="javascript:;">设置字段</a>)';
var chk = { xtype: 'checkbox', boxLabel: opname, name: 'cbopitem', inputValue: item1.ID, checked: getopIscheck(perJson, item1.ID) };
checkGroup.push(chk);
});
if (checkGroup.length > 0)
checklist.push(new Ext.form.CheckboxGroup({ fieldLabel: name, columns: 1, items: checkGroup }));
});
form.add(checklist);
GridMain(node, form);
};
function getopIscheck(perJson, opid) {
var check = false; length
for (var i = 0; i < perJson.length; i++) {
if (perJson[i].OperationID == opid) {
check = true;
break;
}
}
return check;
}
- 大小: 54.8 KB
- 大小: 36.4 KB
分享到:
相关推荐
1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...
在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
**2.16 Form Panel (Ext.FormPanel)** - **xtype**: `form` - **功能描述**:Form Panel 是一个包含表单字段的面板。 - **主要用途**:用于创建和管理表单,支持数据验证和提交。 **2.17 Checkbox (Ext.form....
在Ext JS中,`Ext.form_load`涉及到的主要知识点是FormPanel的数据加载机制,这包括了对FormPanel的form对象、BasicForm、doAction方法、Ext.form.Action对象以及JsonReader的使用。以下是对这些概念的详细解释: 1...
(1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....
- `form`:`Ext.FormPanel` 或 `Ext.form.FormPanel`,用于创建表单的容器。 - `checkbox`:`Ext.form.Checkbox`,多选框组件。 - `combo`:`Ext.form.ComboBox`,下拉选择框。 - `datefield`:`Ext.form....
var form = new Ext.form.FormPanel({ title: ' 用户登录 ', frame: true, items: [textfield], renderTo: document.body }); ``` 方法二是直接在FormPanel配置中定义items,像这样: ```javascript var form ...
1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **`combo`** - `Ext.form....
formPanel.getForm().reset(); // 重置表单 } }] ``` 5. **监听表单事件**:可以监听表单的提交事件,以便在用户点击“提交”按钮时执行相应的操作。 ```javascript listeners: { submit: function(form, ...
3. **更新验证状态**:如果在表单已经初始化并显示的情况下添加字段,可能需要手动触发FormPanel的验证,可以使用`formPanel.getForm().isValid()`来检查整个表单是否有效。 4. **错误处理**:当验证失败时,EXT JS...
1. **`form`:** 表单面板组件,用于创建表单,通过`Ext.FormPanel/Ext.form.FormPanel`类实现。 2. **`checkbox`:** 多选框组件,通过`Ext.form.Checkbox`类实现。 3. **`combo`:** 下拉框组件,用于创建下拉列表...
- **`form` (Ext.FormPanel/Ext.form.FormPanel)**: 表单面板组件,用于创建包含多个表单元素的表单。 - **`checkbox` (Ext.form.Checkbox)**: 多选框组件,用于实现多选功能。 - **`combo` (Ext.form.ComboBox)**: ...
var formPanel = new Ext.form.FormPanel({ items: [multiSelectComboBox], renderTo: Ext.getBody() }); ``` 在上述代码中,我们创建了一个JSON数据存储,并将其与ComboBox关联。设置`multiSelect: true`后,...
【EXTJS】Ext.AJAX与FormPanel在登录案例中的应用 EXTJS是一个强大的JavaScript库,主要用于构建富客户端Web应用程序。在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和...
formPanel.getForm().loadRecord(store.getAt(0)); // 加载第一条记录 } } }); ``` 通过以上步骤,你可以实现动态加载Ext表单数据的功能。在实际应用中,可能还需要考虑错误处理、数据验证、动态更新等问题,但...
- **FormPanel**: `Ext.FormPanel`,表单容器。 - **Checkbox**: `Ext.form.Checkbox`,复选框。 - **ComboBox**: `Ext.form.ComboBox`,下拉选择框。 - **DateField**: `Ext.form.DateField`,日期输入框。 - ...
var formPanel = Ext.create('Ext.form.Panel', { items: [fileUploadField], buttons: [{ text: '上传', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit...
为了创建一个UploadDialog,你可以使用`Ext.window.Window`或`Ext.container.Viewport`来创建一个弹出窗口,里面包含一个`Ext.form.FormPanel`,并在其中添加`FileField`。当用户选择文件并点击提交按钮时,ExtJS会...