gigas01
16 Jul 2012, 9:33 AM
Hello I'm a noob dev.
Want to merge 2UI to 1 UI..\
I dont know why it is not working. have some error msg.
If I run it serperately it works perfect.
But I run it together doesnt work.
These are the two codes
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/adapter/ext/ext-base.js"; ?>"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-all.js"; ?>"></script>
<script type="text/javascript">
var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
var BASE_PATH = '<?php echo base_url(); ?>';
var BASE_ICONS = BASE_PATH + 'assets/icons/';
Ext.onReady(function() {
var strUsers = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: [
'id', 'fullname', 'email', 'country_id',
'country_name', 'occupation', 'birthdate'
],
root: 'rows', totalProperty: 'results'
}),
proxy: new Ext.data.HttpProxy({
url: BASE_URL + 'user/ext_get_all',
method: 'POST'
})
});
var tbUsers = new Ext.Toolbar({
items:[{
text: 'Add',
icon: BASE_ICONS + 'user_add.png'
}, '-', {
text: 'Delete',
icon: BASE_ICONS + 'user_delete.png'
}]
});
var cbGrid = new Ext.grid.CheckboxSelectionModel();
var gridUsers = new Ext.grid.GridPanel({
frame: true, border: true, stripeRows: true, sm: cbGrid,
store: strUsers, loadMask: true, title: 'Users List',
style: 'margin:0 auto;', height: 330, width: 722,
columns: [
cbGrid, {
header: "Fullname",
dataIndex: 'fullname',
width: 180
}, {
header: "Email",
dataIndex: 'email',
width: 180
}, {
header: "Country",
dataIndex: 'country_name',
width: 120
}, {
header: "Occupation",
dataIndex: 'occupation',
width: 120
}, {
header: "Birth",
dataIndex: 'birthdate',
width: 80,
renderer : Ext.util.Format.dateRenderer('d/m/Y')
}
],
tbar: tbUsers,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: strUsers,
displayInfo: true
})
});
gridUsers.render('divgrid');
strUsers.load();
});
</script>
<style type="text/css">
#divgrid {
background: #e9e9e9;
border: 1px solid #d3d3d3;
margin: 20px;
padding: 20px;
}
</style>
<title>ExtJS CodeIgniter — CRUD</title>
< /head>
< body>
<div id="divgrid"></div>
< /body>
< /html>
Ext.onReady(function() {
/* 01. Start The Form Register Component */
// 01. Form Register
var formRegister = new Ext.FormPanel({
frame: false, border: false, buttonAlign: 'center',
url: BASE_URL + 'user/ext_register', method: 'POST', id: 'frmRegister',
bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
width: 300, labelWidth: 150,
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
id: 'regUsername',
allowBlank: false,
vtype: 'uniqueusername'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
inputType: 'password',
vtype: 'passwordlength',
id: 'pass1'
}, {
xtype: 'textfield',
fieldLabel: 'Confirm Password',
name: 'cpassword',
allowBlank: false,
inputType: 'password',
id: 'pass2',
initialPassField: 'pass1',
vtype: 'password'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
id: 'regEmail',
name: 'email',
vtype:'uniqueemail',
allowBlank: false,
validationEvent: ''
}
],
buttons: [
{ text: 'Register', handler: fnRegister },
{ text: 'Reset', handler: function() {
formRegister.getForm().reset();
}
}
]
});
function fnRegister() {
Ext.getCmp('frmRegister').on({
beforeaction: function() {
if (formRegister.getForm().isValid()) {
Ext.getCmp('winRegister').body.mask();
Ext.getCmp('winLogin').body.mask();
Ext.getCmp('sbWinRegister').showBusy();
}
}
});
formRegister.getForm().submit({
success: function() {
formRegister.getForm().reset();
Ext.getCmp('sbWinRegister').setStatus({
text: 'Registration Success',
iconCls: 'x-status-saved'
});
Ext.getCmp('winRegister').body.unmask();
Ext.getCmp('winLogin').body.unmask();
}
});
}
// 01. Window Register
var winRegister = new Ext.Window({
title: 'CI Extjs — User Register',
id: 'winRegister',
layout: 'fit',
width: 350,
height: 210,
y: 120,
resizable: false,
closable: false,
items: [formRegister],
bbar: new Ext.ux.StatusBar({
text: 'Ready',
id: 'sbWinRegister'
})
});
winRegister.show();
/* 02. Start The Form Login Component */
// 02. Form Login
var formLogin = new Ext.FormPanel({
frame: false, border: false, buttonAlign: 'center',
url: BASE_URL + 'user/ext_login', method: 'POST', id: 'frmLogin',
bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
width: 300, labelWidth: 150,
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
id: 'logUsername',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Password',
name: 'password',
id: 'logPassword',
allowBlank: false,
inputType: 'password'
}
],
buttons: [
{ text: 'Login', handler: fnLogin },
{ text: 'Reset', handler: function() {
formLogin.getForm().reset();
}
}
]
});
function fnLogin() {
Ext.getCmp('frmLogin').on({
beforeaction: function() {
if (formLogin.getForm().isValid()) {
Ext.getCmp('winRegister').body.mask();
Ext.getCmp('winLogin').body.mask();
Ext.getCmp('sbWinLogin').showBusy();
}
}
});
formLogin.getForm().submit({
success: function() {
window.location = BASE_URL;
},
failure: function(form, action) {
Ext.getCmp('winRegister').body.unmask();
Ext.getCmp('winLogin').body.unmask();
if (action.failureType == 'server') {
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.getCmp('sbWinLogin').setStatus({
text: obj.errors.reason,
iconCls: 'x-status-error'
});
} else {
if (formLogin.getForm().isValid()) {
Ext.getCmp('sbWinLogin').setStatus({
text: 'Authentication server is unreachable',
iconCls: 'x-status-error'
});
} else {
Ext.getCmp('sbWinLogin').setStatus({
text: 'Something error in form !',
iconCls: 'x-status-error'
});
}
}
}
});
}
// 02. Window Login
var winLogin = new Ext.Window({
title: 'CI Extjs — User Login',
id: 'winLogin',
layout: 'fit',
width: 350,
height: 160,
y: 340,
resizable: false,
closable: false,
items: [formLogin],
bbar: new Ext.ux.StatusBar({
text: 'Ready',
id: 'sbWinLogin'
})
});
winLogin.show();
});
Want to merge 2UI to 1 UI..\
I dont know why it is not working. have some error msg.
If I run it serperately it works perfect.
But I run it together doesnt work.
These are the two codes
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/adapter/ext/ext-base.js"; ?>"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/ext/ext-all.js"; ?>"></script>
<script type="text/javascript">
var BASE_URL = '<?php echo base_url(); ?>' + 'index.php/';
var BASE_PATH = '<?php echo base_url(); ?>';
var BASE_ICONS = BASE_PATH + 'assets/icons/';
Ext.onReady(function() {
var strUsers = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: [
'id', 'fullname', 'email', 'country_id',
'country_name', 'occupation', 'birthdate'
],
root: 'rows', totalProperty: 'results'
}),
proxy: new Ext.data.HttpProxy({
url: BASE_URL + 'user/ext_get_all',
method: 'POST'
})
});
var tbUsers = new Ext.Toolbar({
items:[{
text: 'Add',
icon: BASE_ICONS + 'user_add.png'
}, '-', {
text: 'Delete',
icon: BASE_ICONS + 'user_delete.png'
}]
});
var cbGrid = new Ext.grid.CheckboxSelectionModel();
var gridUsers = new Ext.grid.GridPanel({
frame: true, border: true, stripeRows: true, sm: cbGrid,
store: strUsers, loadMask: true, title: 'Users List',
style: 'margin:0 auto;', height: 330, width: 722,
columns: [
cbGrid, {
header: "Fullname",
dataIndex: 'fullname',
width: 180
}, {
header: "Email",
dataIndex: 'email',
width: 180
}, {
header: "Country",
dataIndex: 'country_name',
width: 120
}, {
header: "Occupation",
dataIndex: 'occupation',
width: 120
}, {
header: "Birth",
dataIndex: 'birthdate',
width: 80,
renderer : Ext.util.Format.dateRenderer('d/m/Y')
}
],
tbar: tbUsers,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: strUsers,
displayInfo: true
})
});
gridUsers.render('divgrid');
strUsers.load();
});
</script>
<style type="text/css">
#divgrid {
background: #e9e9e9;
border: 1px solid #d3d3d3;
margin: 20px;
padding: 20px;
}
</style>
<title>ExtJS CodeIgniter — CRUD</title>
< /head>
< body>
<div id="divgrid"></div>
< /body>
< /html>
Ext.onReady(function() {
/* 01. Start The Form Register Component */
// 01. Form Register
var formRegister = new Ext.FormPanel({
frame: false, border: false, buttonAlign: 'center',
url: BASE_URL + 'user/ext_register', method: 'POST', id: 'frmRegister',
bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
width: 300, labelWidth: 150,
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
id: 'regUsername',
allowBlank: false,
vtype: 'uniqueusername'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
name: 'password',
allowBlank: false,
inputType: 'password',
vtype: 'passwordlength',
id: 'pass1'
}, {
xtype: 'textfield',
fieldLabel: 'Confirm Password',
name: 'cpassword',
allowBlank: false,
inputType: 'password',
id: 'pass2',
initialPassField: 'pass1',
vtype: 'password'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
id: 'regEmail',
name: 'email',
vtype:'uniqueemail',
allowBlank: false,
validationEvent: ''
}
],
buttons: [
{ text: 'Register', handler: fnRegister },
{ text: 'Reset', handler: function() {
formRegister.getForm().reset();
}
}
]
});
function fnRegister() {
Ext.getCmp('frmRegister').on({
beforeaction: function() {
if (formRegister.getForm().isValid()) {
Ext.getCmp('winRegister').body.mask();
Ext.getCmp('winLogin').body.mask();
Ext.getCmp('sbWinRegister').showBusy();
}
}
});
formRegister.getForm().submit({
success: function() {
formRegister.getForm().reset();
Ext.getCmp('sbWinRegister').setStatus({
text: 'Registration Success',
iconCls: 'x-status-saved'
});
Ext.getCmp('winRegister').body.unmask();
Ext.getCmp('winLogin').body.unmask();
}
});
}
// 01. Window Register
var winRegister = new Ext.Window({
title: 'CI Extjs — User Register',
id: 'winRegister',
layout: 'fit',
width: 350,
height: 210,
y: 120,
resizable: false,
closable: false,
items: [formRegister],
bbar: new Ext.ux.StatusBar({
text: 'Ready',
id: 'sbWinRegister'
})
});
winRegister.show();
/* 02. Start The Form Login Component */
// 02. Form Login
var formLogin = new Ext.FormPanel({
frame: false, border: false, buttonAlign: 'center',
url: BASE_URL + 'user/ext_login', method: 'POST', id: 'frmLogin',
bodyStyle: 'padding:10px 10px 15px 15px;background:#dfe8f6;',
width: 300, labelWidth: 150,
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
id: 'logUsername',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Password',
name: 'password',
id: 'logPassword',
allowBlank: false,
inputType: 'password'
}
],
buttons: [
{ text: 'Login', handler: fnLogin },
{ text: 'Reset', handler: function() {
formLogin.getForm().reset();
}
}
]
});
function fnLogin() {
Ext.getCmp('frmLogin').on({
beforeaction: function() {
if (formLogin.getForm().isValid()) {
Ext.getCmp('winRegister').body.mask();
Ext.getCmp('winLogin').body.mask();
Ext.getCmp('sbWinLogin').showBusy();
}
}
});
formLogin.getForm().submit({
success: function() {
window.location = BASE_URL;
},
failure: function(form, action) {
Ext.getCmp('winRegister').body.unmask();
Ext.getCmp('winLogin').body.unmask();
if (action.failureType == 'server') {
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.getCmp('sbWinLogin').setStatus({
text: obj.errors.reason,
iconCls: 'x-status-error'
});
} else {
if (formLogin.getForm().isValid()) {
Ext.getCmp('sbWinLogin').setStatus({
text: 'Authentication server is unreachable',
iconCls: 'x-status-error'
});
} else {
Ext.getCmp('sbWinLogin').setStatus({
text: 'Something error in form !',
iconCls: 'x-status-error'
});
}
}
}
});
}
// 02. Window Login
var winLogin = new Ext.Window({
title: 'CI Extjs — User Login',
id: 'winLogin',
layout: 'fit',
width: 350,
height: 160,
y: 340,
resizable: false,
closable: false,
items: [formLogin],
bbar: new Ext.ux.StatusBar({
text: 'Ready',
id: 'sbWinLogin'
})
});
winLogin.show();
});