I am working in extjs+Yii. In extjs i am creating multiple choice question paper of 20 questions. These questions i am retriving from Yii framework. So in extjs i am having code as=
View=
Question.js
Ext.define('Balaee.view.question.Question',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.question.QuestionView'
],
id:'QuestionId',
alias:'widget.question',
title:'Question',
height:180,
items:[
{
xtype:'questionView',
},
],//end of items square
buttons:[
{
xtype:'button',
fieldLabel:'Vote',
name:'vote',
formBind:true,
text:'submit',
action:'voteAction',
}
]
});
QuestionView.js
Ext.define('Balaee.view.question.QuestionView',
{
extend:'Ext.view.View',
id:'QuestionViewId',
alias:'widget.questionView',
store:'Question',
config:
{
tpl:'<tpl for=".">'+
'<div id="main">'+
'</br>'+
'<b>Question :-</b> {question}</br>'+
//'<p>-------------------------------------------</p>'+
'<tpl for="options">'+ // interrogate the kids property within the data
'<p>  <input type="radio" name="opt" > {option} </p>'+
'</tpl></p>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
}
});
So i am having view which is displaying question and its options as radio buttons. i am displaying 20 questions. At the end its having submit button. On the click of submit button,i want to display result. To calculate result i need to store user's selected options of all question in store of extjs in order to calculate result. So how to store all questions selected option in extjs?
Are you asking how to place the form's radio button values into an ad-hoc Ext data store?
Related
I have a Rally grid that I'm creating using the Rally app builder. Standard grid using the defect model. One of the fields in the defect model is set to hidden in the field setup in the Rally Workspaces and Projects setup. I'd like to dynamically make the field visible in my grid so that it only appears on my grid and not on the defect page when entering a defect. Any ideas on how to do that? Thanks.
This was a pretty tricky one. The grid and board components are hard wired to not show data from hidden fields by default and unfortunately there are not any config properties exposed to turn this behavior off. Here's what I came up with:
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'Owner',
{
text: 'Hidden Field', //set column header text
renderer: function(value, meta, record) {
//return the rendered field data
return record.get('c_HiddenField');
}
}
],
context: this.getContext(),
storeConfig: {
model: 'userstory',
fetch: ['c_HiddenField'] //need to explicitly fetch
}
});
Basically you include a column in your columnCfgs without a dataIndex specified. Set the text and renderer to work with your field.
You'll also need to manually fetch your field in the storeConfig since the grid won't understand how to do it otherwise.
I've this requirement of giving user provision of subscribing to certain categories. The layout which is to be designed is having -
checkbox => at top toggling automatic subscription setting.
dataview => at middle, having list of subscriptions and checkbox field.
button => allowing user to update the subscription list.
I've setup the dataview correctly. Dataview is added as fallows -
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
When I try to add component no 1 and 3 ( specified above in question ) , dataview is not getting displayed. I'm getting checkbox and button only. When I inspect the rendered html, I realize that dataview is not even populating with data config. The code I used to add these three components is as fallows -
Ext.define("PApp.view.home.Subscription", {
extend:'Ext.Container',
xtype:'subscription',
config: {
layout:'fit',
fullscreen:true,
scrollable:false,
items: [
{
xtype:'container',
fullscreen:true,
items:[
{
xtype:'checkboxfield',
name : 'subscriber-setting',
label: 'Subscriber',
value: 'yes',
checked: true
},
{
xtype: 'dataview',
itemTpl:'<div style="color:#fff;margin-left: 20px;background: transparent;" class="x-field-checkbox x-field">' +
'<span style="float:left">{name}</span>' +
'<span style="float:right">' +
'<input type="checkbox" class="x-input-el x-input-checkbox" style="display: inline;top:10px">'+
'</span>'+
'</div>',
fields:['name'],
data:[
{
name :'A'
},
{
name :'B'
},
{
name :'C'
}
},
{
xtype:'button',
text:'Update',
ui:'action'
}
}
]
}
});
I can't figure out why dataview is not getting displayed ( not even populated with data ). When dataview is not breaded between the checkbox and button, it gets rendered as expected.
and when dataview is breaded ,it looks like this -
Please try giving some height in css of template or dataview config with hbox layout of container
Tried few things and managed to solve this problem. Mostly, list or dataview are used to display fullscreen content. But in my case, I needed it between two other components.
To make this work, I added following config to parent container -
layout: {
type: 'vbox',
align : 'stretch'
},
This was not sufficient though. Need to add flex config in each component. Without this config, dataview was not being seen. And I was wrong about data not populating indeed it was ( missed it first time since html is deeply nested ). Here's the preview how it looks.
I have an application where I have around 1000 records to be displayed in sencha list from localstore. If i try to populate all the data at one shot then it takes long time to refresh the list (around 1 minute).
Now I want to load list with initial 20 records and then it should load next 20 as user scroll down. How to capture the event when user scrolls to end of list?
This is excerpt from Secncha Doc site
Ext.create('Ext.dataview.List', {
config: {
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull to refresh...'
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}
],
itemTpl: '<div class="item">{title}</div>',
store: 'Items'
}
});
From me I'm adding instead of xclass: '' you could also use xtype: 'listpaging'. It also works...
Cheers, Oleg
PS. if it is not still clear paste your code snippets here...
To add to oleg sencha does not paginate ie your pagination logic must be in the server side the plugin only increments the page parameter by 1 which can be configured in the pageParam config in the ajaxProxy of the store
I'm using extjs4 and I'm trying to create a tab panel, that each tab has a different grid that loads data from a store. (each grid different store)
I would like to load the particular store only when the user clicks on the respective tab.
I don't see how I can catch the user click on the panel.
How I can do that?
I had a similar performance loading issue and failed to solve it with deferredRender. You have to add the event activate for the tab you want to load when the tab is activated :
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'activate' : function(){
store2.load();
},
}
}
Worked fine for me even if it's a temporary solution. Extjs 4.1 should improve loading/rendering performances. We'll see.
You can activate the panel by placing setActiveItem() in tab handler.
Ok, I figured out, I just needed to have deferredRender=true and to add the respective store.load() on the beforerender event on every tab:
var lowerTabPanel = Ext.create('Ext.tab.Panel', {
deferredRender: true,
items: [
{
title: 'tab1',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store1.load();
},
}
},
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store2.load();
},
}
},
]
});
Ext.TabPanel has config option deferredRender. May be it helps you.
Documentation:
true by default to defer the rendering of child items to the browsers DOM until a tab is activated. false will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
Update: Also look at autoLoad config option in Ext.data.JsonStore, it should be false.
i have a panel which should show the "description" field of "currently activeitem of nestedlist". nestedlist uses the model having fields:
id
text
description
when user taps on any item of nestedList [on selectionchange OR itemtap&backtap], i want to change description in the panel with description of "currently activeItem of nestedList".
Is this possible?
thanks for any help/solution/pointer.
The same problem I had today, and no solution had been found with a nested list, because no single field can be taken from a Ext.data.TreeStore. One solution could be that you have lots of "if-function 'do with all the ID's and then you give each ID a text. But that's not good.
I've decided to make a simple list.
if you want I can show you my solution for the simple list
ps.: I use Sencha Touch 1.1
Update:
NotesApp.views.NaviList = new Ext.List({
fullscreen: true,
flex: 1,
layout: 'card',
scroll: false,
useToolbar: false,
itemTpl: '{text}',
store: store,
listeners: {
itemtap: function (obj, idx, el, e) {
var record = this.store.getAt(idx);
var tle = record.get('text');
index = record.get('index');
NotesApp.views.notesListContainer.setActiveItem(index, { type: 'slide', direction: 'left' });
}
}
}
});
description:
My App has the name: "NotesApp".
"notesListContainer" is a Container where all my List are displayed. "index" is an ID that I get from the store and the calls list.
Now when you tap on my NaviList you set a new ActiveItem in this Container.
thanks a lot for the reply. I also tried using simple list with one Ext.button(back button in case of nestedlist). On itemtap and buttonclink, i change list's content by
var t = new Ext.data.Store and list.setStore(t).
Please let me know if there is any other better option to do it.