Related
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.
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.
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'
} ]
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
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