PDA

View Full Version : asdf



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 &mdash; 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 &mdash; 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 &mdash; 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();

});

scottmartin
16 Jul 2012, 9:44 AM
I dont know why it is not working. have some error msg.

Can you elaborate as to what the error messages are?
When you say you combine them, are you just pasting code into 1 file?

Scott

gigas01
16 Jul 2012, 11:32 AM
i'm not used to this extjs, so i'm just copy-pasting right now :(
year i just copy-pasted the second code inside this method.
Dont know what the problem is.


Ext.onReady(function() {

}

but it is not working :(.

i'll show you the error msg what it is after the school.

scottmartin
16 Jul 2012, 12:43 PM
Several things that will you along the way ...

-Separate your code into separate files. You do not want to have 1 long file with all of your code.
Just include each JS file in your HTML file. Later you can compile (combine) them into 1 file for release using our SDK. Do not confuse this with placing all the code in 1 file.

-Install a debugger like FireBug for FireFox, or use the DevTools in Chrome.
http://getfirebug.com/

-Have a look at Sencha Architect for creating screens/apps.
You can also develop from SA as well
http://www.sencha.com/products/architect

Find a good editor .. ;)

Have a look at our examples. They are all in the examples DIR from your install.

Regards,
Scott.