Not showing the form corretly in ExtJs - forms

I've created a form using ExtJs library. Here is my code;
form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Vehicle Registration Number',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Device ID',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Default Rep',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Driver',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Assistant',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 1',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 2',
editable : false,
},
{
xtype : 'combo',
name : 'include_type',
fieldLabel : 'Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
win1.hide();
}
} ]
});
win1 = new Ext.Window({
title: 'Vehicle Assigning',
layout: 'fit',
autoScroll: true,
y: 120,
width: 600,
height: 500,
modal: true,
plain:true,
bodyStyle:'padding:8px;',
buttonAlign:'center',
closeAction: 'hide',
floating: true,
closable : true,
items: [form1]
});
win1.show();
It pop ups a new window successfully, but there is a problem. All the text fields(Vehicle Registration Number, Device ID, and so on) are not showing correctly. The form looks like following:
Why these text fields are not showing correctly ? Another thing that I want to know is how should I center the whole form within the window. I've tried following code but no luck.
layout: {
pack: 'center',
type: 'hbox'
},
Any suggestions are appreciated.
Thank you

1) Looks like your border is overlapping your labels. You can add some padding to the label if you want to move them over slightly. (see below)
2) You have to set the layout on the form, not on the window, if you want the form's contents to be centered.
The code below applies a label width of 200 to each label, adds 25px of padding to the left hand side, and centers the labels and fields in the form.
var form1 = new Ext.form.FormPanel({
bodyStyle : {
"background-color" : "#000000"
},
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
labelWidth: 200,
padding: '0 0 0 25'
},
...

Related

Set store dynamic on a combobox

Hi,
I have two combo boxes. The value of second combo box depends on first combo select. The user does select the first combo then the store of second will be set accordingly.
Here are my two Combos:
Combo 1
items:[
{
xtype : 'combo',
name : 'cmbSATopFacility',
labelStyle : 'color: black; font-weight: bold; width: 250px; padding: 10;',
labelSeparator : "",
id : 'cmbSATopFacility',
width : 250,
fieldLabel : 'Top MGMT Entity',
triggerAction : 'all',
store : Ext
.create(
'Ext.data.Store',
{
id : 'store',
fields : [
{
name : 'id',
type : 'integer',
},
{
name : 'name'
} ],
remoteGroup : true,
remoteSort : true,
proxy : {
type : 'rest',
url : 'pmsRest/facilities?sub_facility_id=-3',
reader : {
root : "facilityMaster",
idProperty : 'id'
}
},
autoLoad : true
}),
displayField : 'name',
valueField : 'id',
multiSelect : false,
typeAhead : true,
listeners : {
change : function(combo) {
/// code to convert GMT String to date object
n();
Ext.getCmp('cmbSAMedFacility').getStore().load();
}
},
allowBlank : false,
//enableKeyEvents : true,
},
Combo 2
{
xtype : 'combo',
name : 'cmbSAMedFacility',
labelStyle : 'color:black;font-weight:bold;width:250px;padding:10;',
labelSeparator : "",
id : 'cmbSAMedFacility',
width : 250,
fieldLabel : 'Institution',
triggerAction : 'all',
store : medfacility,
displayField : 'name',
valueField : 'id',
multiSelect : false,
typeAhead : true,
//disabled: true,
listeners : {
click : function(combo) {
alert("hjdfhcsdj");
n();
Ext.getCmp(this).getStore().load();
}
},
allowBlank : false,
//enableKeyEvents : true,
},
]
Code to set store
var medfacility = loadFacility();
function loadFacility(){
topApp = Ext.getCmp('cmbSATopFacility').getValue( );
alert(topApp);
var urL = 'pmsRest/facilities?sub_facility_id='+topApp ;
alert(urL);
var store = Ext.create('Ext.data.Store', {
id : 'store',
fields : [
{
name : 'id',
type : 'integer',
},
{
name : 'name'
} ],
remoteGroup : true,
remoteSort : true,
proxy : {
type : 'rest',
url : urL,
reader : {
root : "facilityMaster",
idProperty : 'id'
}
},
autoLoad : true
});
return store;
}
I tried to get the values in the second combo but it didn´t work.
WE CAN USE ONLY
listeners : { change : function(combo) { Ext.getCmp('cmbSAMedFacility').bindStore(n());}},
I think you need describe a store for a second combobox, but without data (empty array).
And fill data for that store when you need by using loadData method.
Hope this helps.

how to add/remove composite field in extjs 3.4 dynamically

i am using extjs 3.4 add add this code for add /remove key value pair in field set but is not working fine it is add the field dynamically but when we remove this browser given the infinite loop error and after some time field is also given the following error:
TypeError: this.dom is undefined
here is my code :
//This js for test only
Ext.onReady(function(){
Ext.QuickTips.init();
function addressCounter(incr) {
if (!this.no) {
this.no = 0;
} else {
this.no = this.no + 1;
};
};
var counter = new addressCounter();
console.log(counter.no);
var roomPanel = new Ext.form.FormPanel({
renderTo:"sid",
id: "roomFP",
baseCls: 'x-plain',
labelWidth: 120,
defaultType: 'textfield',
monitorValid:true,
bodyStyle: ' padding: 15px; background-color: #ffffff' ,
items:[
{
xtype: 'fieldset',
title: 'Room Properties',
collapsible: true,
id:'roompropertiesId',
items:[new Ext.Button({
text:'Add Property',
handler: function(item){
var fieldset = Ext.getCmp('roompropertiesId');
if(fieldset.items.length >5){
Ext.MessageBox.alert('Add Property','only five fields has been added');
return;
}
counter.no = counter.no + 1;
var a = fieldset.add({
xtype : 'compositefield'
,
id : 'compositefieldId'+counter.no
,
name : 'name'+counter.no
,
height : 22
,
autoDestroy : true
,
items : [{
name : 'key'+counter.no
,
fieldLabel : "Key",
id : 'keyFieldId'+counter.no
,
xtype : 'textfield'
,
width : 50
,
height : 22
,
allowBlank : true
},{
name : 'value'+counter.no
,
xtype : 'textfield',
id : 'valueFieldId'+counter.no
,
fieldLabel : 'Value'
,
width : 50
,
allowBlank : true
},{
xtype : 'displayfield',
id:'removeFieldId'+counter.no,
html : '<div class="img-delete" onclick="removeFormFields(\''+counter.no+'\');">Remove</div>'
,
height : 16
}]
});
fieldset.doLayout();
removeFormFields = function(id) {
Ext.getCmp('compositefieldId'+id).destroy();
}
}
})]
}
],
listeners : {
render : function(form){
}
},
});
});
It looks like it is bug in Ext JS.
When you put normal Container instead of CompositeField then it works properly.
I figured out that CompositeField subfields are added to BasicForm (FormPanel.getForm) on CompositeField creation, but aren't removed. This causes that, for example, BasicForm validation refers to destroyed fields, and causes error.
IMO you can freely switch from CompositeField to Container.
Call formPanel.getForm().cleanDestroyed() after composite component is destroyed.

getting TypeError: el is null .../ext/ext-all-debug-w-comments.js Line 44393 when loading grid a second time

I'm using a panel called "content panel" in the center of a border layout of my viewport.
I swap content in and out as needed by click handlers against the menu buttons. The second time I swap in this grid it gives this error. This is the only grid that does it in the app and the only grid that has a paging bar. I know the error has something to do with the paging bar being rendered. What am I missing?
controller (changes is the button that's failing):
Ext.define('DDI.controller.DDI', {
extend : 'Ext.app.Controller',
views : [ 'panel.BannerPanel', 'panel.ContentPanel', 'panel.NavPanel', 'panel.FooterPanel', 'Welcome' ],
init : function() {
this.control({
'navpanel button[text=Home]' : {
click : function() {
var cp = Ext.getCmp('contentpanel');
cp.removeAll();
cp.add({
xtype : 'welcomepanel'
});
}
},
...
'navpanel button[text=Changes]' : {
click : function() {
var cp = Ext.getCmp('contentpanel');
var height = Ext.getBody().getViewSize().height - 100;
// cp.removeDockedComponent(cp.getDockedComponent(0));
cp.removeAll(false);
cp.add({
xtype : 'changesummaryview',
height : height
});
cp.doLayout();
}
},
....
The grid panel is defined as such:
var changeStore = Ext.create('DDI.changetracker.store.Change');
Ext.define('DDI.changetracker.view.ChangeSummaryView', {
extend : 'Ext.grid.Panel',
alias : 'widget.changesummaryview',
id : 'changesummaryview',
title : 'All Change Summary',
scroll : 'both',
store : changeStore,
tbar : [
'Open Change Summary View',
'-',
{text : 'New Change'
}, {
xtype : 'button',
text : 'Print'
},
'->',
{xtype : 'exporterbutton'
}
],
bbar : Ext.create('Ext.PagingToolbar', {
store : changeStore,
displayInfo : true
}),
listeners : {
'render' : function(grid) {
grid.view.tip = Ext.create('Ext.tip.ToolTip', {
target : grid.getEl(),
showDelay : 2000,
// Each grid row causes its own seperate show and hide.
delegate : ".x-grid-cell",
items : [], // add items later based on the record
// Render immediately so that tip.body can be referenced prior
// to the first show.
listeners : {
// Change content dynamically depending on which element
// triggered the show.
beforeshow : function updateTipBody(tip) {
var rec = grid.view.getRecord(
Ext.get(tip.triggerElement).findParentNode('.x-grid-row'));
grid.fireEvent('rowhover', tip, rec);
return true;
}
}
});
}
},
columns : [
{
header : 'ticket',
dataIndex : 'ticket',
filter : {
type : 'string'
},
flex : 1,
editor : 'textfield'
},
{
header : 'account_name',
dataIndex : 'account_name',
flex : 1,
editor : {
xtype : 'customercombo',
fieldLabel : ''
}
},
{
header : 'employee_1',
dataIndex : 'employee_1',
flex : 1,
editor : {
xtype : 'personelcombo',
fieldLabel : '',
valueField : 'name'
}
},
{
header : 'dns_team_approved',
dataIndex : 'dns_team_approved',
filter : {
type : 'string'
},
flex : 1,
editor : {
xtype : 'dnsapprovecombo',
fieldLabel : ''
}
},
{
header : 'approval_status',
dataIndex : 'approval_status',
flex : 1,
editor : {
xtype : 'approvalstatuscombo',
fieldLabel : ''
}
},
{
header : 'status',
dataIndex : 'status',
flex : 1,
filter : {
type : 'list',
options : [ [ '%', 'All' ], [ 'OPEN', 'OPEN' ], [ 'HOLD', 'HOLD' ], [ 'CLOSED', 'CLOSED' ],
[ 'CANCELED', 'CANCELED' ] ],
value : '%',
active : true,
single : true
},
editor : {
xtype : 'statuscombo',
fieldLabel : '',
store : 'Status'
}
}, {
header : 'open_date',
dataIndex : 'open_date',
flex : 1,
editor : 'textfield'
}, {
header : 'next_check',
dataIndex : 'next_check',
flex : 1,
editor : 'textfield',
renderer:function(value, metadata, record, rowIndex, colIndex, store){
a=value.split(" ");
d=a[0].split("-");
t=a[1].split(":");
dateValue=new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
today=new Date();
if (dateValue <= today){
return '<span style="background-color: #FFff66">'+value+'</span>';
}
return value;
}
}, {
header : 'start_time',
dataIndex : 'start_time',
flex : 1,
editor : 'textfield',
renderer:function(value, metadata, record, rowIndex, colIndex, store){
a=value.split(" ");
d=a[0].split("-");
t=a[1].split(":");
dateValue=new Date(d[0],d[1]-1,d[2],t[0],t[1],t[2]);
today=new Date();
if (dateValue <= today){
return '<span style="background-color: #FF8080">'+value+'</span>';
}
return value;
}
}, {
header : 'end_date',
dataIndex : 'end_date',
flex : 1,
editor : 'textfield'
}, {
header : 'is_expedited',
dataIndex : 'is_expedited',
flex : 1,
editor : 'textfield'
} ],
features : [ {
ftype : 'filters',
encode : false,
local : false
} ],
plugins : [ {
ptype : 'cellediting',
clicksToEdit : 2,
pluginId : 'cellediting'
} ]

ExtJS 4 proxy Store don't consumes delivered data

I have two grids with a own proxy store each. Each store is bound to the same model with the following definition:
Ext.define('Issue', {
extend: 'Ext.data.Model',
fields : [{
name : 'updated_on',
type : 'string'
}, {
name : 'done_ratio',
type : 'int'
}, {
name : 'start_date',
type : 'string'
}, {
name : 'subject',
type : 'string'
}, {
name : 'due_date',
type : 'string'
}, {
name : 'created_on',
type : 'string'
}, {
name : 'description',
type : 'string'
}, {
name : 'id',
type : 'int'
}, {
name : 'assigned_to',
mapping: 'assigned_to.name'
}, {
name: 'parked',
mapping: 'custom_fields[9].value',
type: 'boolean'
}]
});
The stores their grids and the related container buttons etc. are created in a function. The 2 functions looks like:
var createMyPanel = function() {
var store = new Ext.data.Store({
/*sorters: ['gemeinde','assigned_to'],
groupField: 'gemeinde',*///comment in when want enable grouping
model : 'Issue',
autoLoad: true,
autoSync: true,
proxy : {
type : 'rest',
url : '/issues.json',
reader : {
type : 'json',
root : 'issues'
},
extraParams : runtime.CView.Model.getParams('my')
}
});
var groupingFeature = new Ext.grid.feature.Grouping({
groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
});
var searching = new Ext.ux.grid.feature.Searching({
minChars: 3,
mode: 'local',
searchText: 'Suche einschränken',
selectAllText: 'Alle Felder (ab)wählen',
searchTip: '',
minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
width: 200
});
var commentBtn = new Ext.Button({
text: 'Kommentar zum gewählten Ticket erfassen',
disabled: true,
ticket: null,
margin: 5
});
var toGfBtn = new Ext.Button({
text: 'an GIS-Fachstelle melden',
disabled: true,
ticket:null,
margin: 5
});
var abbruchBtn = new Ext.Button({
text: 'als abgebrochen melden',
disabled: true,
ticket:null,
margin: 5
});
var parkBtn = new Ext.Button({
text: 'Ticket zurücklegen',
disabled: true,
ticket:null,
margin: 5
});
var journalPanel = new Ext.Panel({
title: 'Kommentare',
html:'',
border: false,
autoScroll: true,
flex: 30,
padding: '5 5 5 5'
});
var buttonPanel = new Ext.Panel({
padding: '30 30 10 30',
border: false,
flex: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
});
var contentPanel = new Ext.Panel({
title : 'Beschreibung',
border: false,
html:'',
flex: 50,
padding: '5 5 5 5'
});
var southPanel = new Ext.Panel({
padding: '0 0 5 0',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 30,
items:[contentPanel, journalPanel, buttonPanel]
});
var grid = new Ext.grid.Panel({
store : store,
autoScroll : true,
flex: 70,
columns : [{
text : 'Ticket-Nummer',
width : 100,
sortable : true,
dataIndex : 'id',
menuDisabled : true
}, {
text : 'Abgabe-Datum',
sortable : true,
width : 100,
dataIndex : 'due_date',
menuDisabled : true
}, {
header : 'Thema',
width : 200,
sortable : true,
dataIndex : 'subject',
renderer : function(val) {
return '<div style="white-space:normal !important;">'
+ val + '</div>';
},
menuDisabled : true
}, {
header : 'Gemeinde',
width : 200,
sortable : true,
dataIndex : 'gemeinde',
menuDisabled : true
}, {
header : 'Parzelle',
width : 200,
sortable : true,
dataIndex : 'parzelle',
menuDisabled : true
}, {
header : 'zurückgelegt',
width : 200,
sortable : true,
dataIndex : 'parked',
menuDisabled : true,
renderer : function(val) {
if(val){
return 'Ja';
}else{
return 'Nein';
}
},
},{
header: 'Beschreibung',
dataIndex: 'description',
hidden: true,
menuDisabled : true
}],
bbar: ['->'],
features: [searching/*, groupingFeature*/],//comment this in when want to group
selModel: new Ext.selection.RowModel()
});
var myPanel = new Ext.Panel({
title: 'Meine Fälle',
padding: '0 5 0 5',
bl_id:'my',
layout: {
type: 'vbox',
align: 'stretch'
},
items : [grid, southPanel]
});
return {
that : myPanel,
contentPanel: contentPanel,
grid: grid,
store: store,
toGfBtn:toGfBtn,
journalPanel:journalPanel,
commentBtn:commentBtn,
southPanel:southPanel,
abbruchBtn:abbruchBtn,
parkBtn:parkBtn
}
};
and:
var createAllPanel = function() {
var store = new Ext.data.Store({
/*sorters: ['gemeinde','assigned_to'],
groupField: 'gemeinde',*///comment in when want enable grouping
model : 'Issue',
autoLoad: true,
autoSync: true,
proxy : {
type : 'rest',
url : '/issues.json',
reader : {
type : 'json',
root : 'issues'
},
extraParams : runtime.CView.Model.getParams('all')
}
});
var groupingFeature = new Ext.grid.feature.Grouping({
groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
});
var searching = new Ext.ux.grid.feature.Searching({
minChars: 3,
mode: 'local',
searchText: 'Suche einschränken',
selectAllText: 'Alle Felder (ab)wählen',
searchTip: '',
minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
width: 200
});
var commentBtn = new Ext.Button({
text: 'Kommentar zum gewählten Ticket erfassen',
disabled: true,
ticket: null,
margin: 5
});
var toGfBtn = new Ext.Button({
text: 'an GIS-Fachstelle melden',
disabled: true,
ticket:null,
margin: 5
});
var abbruchBtn = new Ext.Button({
text: 'als abgebrochen melden',
disabled: true,
ticket:null,
margin: 5
});
var parkBtn = new Ext.Button({
text: 'Ticket zurücklegen',
disabled: true,
ticket:null,
margin: 5
});
var journalPanel = new Ext.Panel({
title: 'Kommentare',
html:'',
border: false,
autoScroll: true,
flex: 30,
padding: '5 5 5 5'
});
var buttonPanel = new Ext.Panel({
padding: '30 30 10 30',
border: false,
flex: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
});
var contentPanel = new Ext.Panel({
title : 'Beschreibung',
border: false,
html:'',
flex: 50,
padding: '5 5 5 5'
});
var southPanel = new Ext.Panel({
padding: '0 0 5 0',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 30,
items:[contentPanel, journalPanel, buttonPanel]
});
var grid = new Ext.grid.Panel({
store : store,
autoScroll : true,
flex: 70,
columns : [{
text : 'Ticket-Nummer',
width : 100,
sortable : true,
dataIndex : 'id',
menuDisabled : true
}, {
text : 'Abgabe-Datum',
sortable : true,
width : 100,
dataIndex : 'due_date',
menuDisabled : true
}, {
header : 'Thema',
width : 200,
sortable : true,
dataIndex : 'subject',
renderer : function(val) {
return '<div style="white-space:normal !important;">'
+ val + '</div>';
},
menuDisabled : true
}, {
header : 'Gemeinde',
width : 200,
sortable : true,
dataIndex : 'gemeinde',
menuDisabled : true
}, {
header : 'Parzelle',
width : 200,
sortable : true,
dataIndex : 'parzelle',
menuDisabled : true
}, {
header : 'zugewiesen an',
width : 200,
sortable : true,
dataIndex : 'assigned_to',
menuDisabled : true
}, {
header : 'zurückgelegt',
width : 200,
sortable : true,
dataIndex : 'parked',
menuDisabled : true,
renderer : function(val) {
if(val){
return 'Ja';
}else{
return 'Nein';
}
},
},{
header: 'Beschreibung',
dataIndex: 'description',
hidden: true,
menuDisabled : true
}],
bbar: ['->'],
features: [searching/*, groupingFeature*/],//comment this in when want to group
selModel: new Ext.selection.RowModel()
});
var allPanel = new Ext.Panel({
title: 'Alle Fälle',
padding: '0 5 0 5',
bl_id:'all',
layout: {
type: 'vbox',
align: 'stretch'
},
items : [grid, southPanel]
});
return {
that : allPanel,
contentPanel: contentPanel,
grid: grid,
store: store,
toGfBtn:toGfBtn,
journalPanel:journalPanel,
commentBtn:commentBtn,
southPanel:southPanel,
abbruchBtn:abbruchBtn,
parkBtn:parkBtn
}
};
As you can see the 2 panels are manly the same. When I load the page the request is started automaticly cause the stores have auto load set to true. Now the first store loads the data very well. All is fine and works like expected. What ever. The second store don't. I stalked it down to the following via firebug:
Store is created
store is bound correctly to proxy
the load function is called
data request is done
data looks perfectly like it should
I can inspect the answerd objects via firebug
Only the objects (which are in the browsers ) are not 'loaded' in the store. Store data items keep zero. Also after reload it again. I can't see the point here.
Something to mention: first store has around 50 items to hold the second one 220 or more. I tried to set the time out seeting for the proxy. Didn't help. I Also tried to switch the stores. Set store one to grid 2 and vice versa (it is steered by the extra params setting in the proxy). Only the store with the less amount of items loads well.
Does someone know this issue? I can't come to a conclusion for days now.
check out Proxy Configuration from Sencha's docs.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json-cfg-totalProperty
and your json is not in valid json format, verify it in json viewers for errors.
EDIT: You can listen to exceptions thrown by the data reader: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-event-exception

Local Storage implementation

I am trying to load a form and save the form details in the local storage.
I am not quite sure how i should go about it.
Any suggestions are helpful.
This is my form whose data i need to save.
var count = 3; // count to control the maximum number of selections
//Configuration class definition
Ext.define("InfoImage.view.configure.Settings",{
extend : 'Ext.form.Panel',
requires : [
//'InfoImage.view.workItemPanel',
'Ext.TitleBar', 'Ext.field.Text', 'Ext.field.Toggle',
'Ext.field.Select', 'Ext.layout.HBox',
'Ext.field.Number', 'Ext.field.Checkbox',
'Ext.form.FieldSet', 'Ext.field.Password',
'Ext.field.Url' ],
xtype : 'settingsPanel',
id : 'settings',
config : {
//store:'configStore',
scrollable : {
direction : 'vertical'
},
items : [
{
xtype : 'toolbar',
ui : 'dark',
docked : 'top',
title : 'InfoImage Settings',
items : [
{
xtype : 'button',
iconCls : 'delete2',
iconMask : true,
ui : 'normal',
id : 'homeSettingbtn'
},
{xtype: 'spacer'},
{
xtype : 'button',
//text:'Save',
iconCls : 'save_fin',
iconMask : true,
ui : 'normal',
id : 'savebtn',
handler : function() {
//console.log('hi');
//var form = Ext.getCmp('settings').getValues().validate();
//form.validate();
// var errors = form.validate();
//console.log(form.isValid());
}
},
{
xtype : 'button',
//text:'Default',
iconCls : 'default',
iconMask : true,
ui : 'normal',
handler : function() {
var form = Ext.getCmp('settings');
form.reset();
}
}
]
},
{
//fieldset defined for the Server Configuration details to be entered.
xtype : 'fieldset',
title : 'Server Configuration',
defaults : {
xtype : 'selectfield',
labelWidth : '30%',
},
items : [
{
xtype : 'urlfield',
name : 'servname',
id : 'servname',
label : 'Server Name',
labelWidth : '30%'
},
{
xtype : 'numberfield',
id : 'port',
name : 'port',
label : 'Port',
value : '80',
labelWidth : '30%'
},
{
xtype : 'selectfield',
name : 'protocol',
id : 'protocol',
label : 'Protocol',
labelWidth : '30%',
usePicker : false,
handler : function() {
},
options : [ {
text : 'HTTP',
value : 'HTTP'
}, {
text : 'HTTPS',
value : 'HTTPS'
}
]
}
]
},
{
//fieldset defined for the User Configuration details to be entered.
xtype : 'fieldset',
title : 'User Configuration',
items : [ {
xtype : 'textfield',
name : 'username',
id : 'username',
label : 'User Name',
labelWidth : '30%'
}, {
xtype : 'passwordfield',
name : 'password',
id : 'password',
label : 'Password',
labelWidth : '30%'
}, {
xtype : 'textfield',
id : 'domain',
name : 'domain',
label : 'Domain',
labelWidth : '30%'
} ]
},
{
//fieldset defined for the Work Item display attributes to be checked.
xtype : 'fieldset',
id:'check',
title : '<div class="appconfig"><div>App Configuration</div>'
+ '<br /><div style="font-size: 14px;font-weight: bold;">Work Item display attributes</div></div>',
defaults : {
xtype : 'checkboxfield',
labelWidth : '30%'
},
items : [
{
name : 'domainname',
id : 'c1',
value : 'domainname',
label : 'Domain Name',
listeners : {
check : function() {
var obj1 = Ext
.getCmp('c1');
if (obj1.isChecked()) {
obj1.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj1.uncheck();
count--;
}
}
},
uncheck : function() {
var obj1 = Ext
.getCmp('c1');
if (!obj1.isChecked()) {
obj1.uncheck();
count--;
}
}
}
},
{
name : 'objectid',
id : 'c2',
value : 'objectid',
label : 'Object ID',
checked : 'true',
listeners : {
check : function() {
var obj2 = Ext
.getCmp('c2');
if (obj2.isChecked()) {
obj2.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj2.uncheck();
count--;
}
}
},
uncheck : function() {
var obj2 = Ext
.getCmp('c2');
if (!obj2.isChecked()) {
obj2.uncheck();
count--;
}
}
}
},
{
name : 'servername',
id : 'c3',
value : 'servername',
label : 'Server Name',
listeners : {
check : function() {
var obj3 = Ext
.getCmp('c3');
if (obj3.isChecked()) {
obj3.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj3.uncheck();
count--;
}
}
},
uncheck : function() {
var obj3 = Ext
.getCmp('c3');
if (!obj3.isChecked()) {
obj3.uncheck();
count--;
}
}
}
},
{
name : 'workitemname',
id : 'c4',
value : 'workitemname',
label : 'WorkItem Name',
checked : 'true',
listeners : {
check : function() {
var obj4 = Ext
.getCmp('c4');
if (obj4.isChecked()) {
obj4.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj4.uncheck();
count--;
}
}
},
uncheck : function() {
var obj4 = Ext
.getCmp('c4');
if (!obj4.isChecked()) {
obj4.uncheck();
count--;
}
}
}
} ]
},
{
//fieldset defined for the App Subtitle to be entered.
xtype : 'fieldset',
items : [ {
xtype : 'textfield',
name : 'apptitle',
id : 'apptitle',
label : 'App Subtitle',
labelWidth : '30%',
value : 'Mobile Client Work Manager'
} ]
}
]
}
});
Do i need to create model and store? how do i get the values and store it?
Here's how you declare your store :
Ext.define('App.store.Items', {
extend: 'Ext.data.Store',
requires:"Ext.data.proxy.LocalStorage",
config: {
proxy: {
type: 'localstorage',
id: 'application-items'
},
autoLoad: true,
model: 'App.model.Item',
}
});
Here's the model
Ext.define('App.model.Item', {
extend: 'Ext.data.Model',
config: {
fields: [
'field1',
'field2'
]
}
});
Then, to add an item to the store :
store.add({field1:'value1',field2:'value2'});
store.sync();
Hope this helps
http://nareshtank.blogspot.in/2012/03/html-5-localstorage-usefull-methods.html